Add Custom HTML Elements to Grid Cells
In general, cells in Grid component display only single line of text. If we want to show additional content like images, buttons, progress bars or other custom HTML elements, we need to use a template. In this article, you will learn how to create templates with custom content where HTML elements are arranged in different layouts.
There is a sample code below written in JavaScript, Angular, React and Vue that shows how to add custom HTML elements to grid cells using templates.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In above example, we have several columns with different content in their cells. Some grid cells show an icon and text, other shows a progress bar and the last one shows a button. All of these columns use a template as a model by which grid cell content is created.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
IntegralUI Web
Native Web Components for Angular, React and Vue
How to Create Custom Templates for Grid Cells
To create a custom template in Grid component for cells you need to use the rowTemplate function. This function has the following signature:
rowTemplate(row, cell)Where function parameters are:
- row - a reference to the row object to which this template is applied
- cell - a reference to the cell object to which this template is applied
Use of these parameters is optional. You can use them to create custom conditions that will determine when created template is applied. Depending on which parameter is in use when creating a template, you can create different conditions, for example:
- When row is used, the template is applied for all cells in specific row
- When cell is used without a row, the template is applied for all cells in related column
- When cell is used with a row, the template is applied only for specific cell in specified row
- When no parameter is used, the template is applied for all grid cells
In addition, you can also create different template for cells under the same column. For this purpose, you can use built-in fields like row.id or cell.cid to determine the specific cell, and create a condition by which the template is applied.
Because row and cell objects can have custom fields, you can use any fields from your data source to set conditions when creating the cell template.
Each template can have custom HTML elements arranged in different layouts along with custom objects within. In addition, you can add event handlers for different standard or custom events, depending on HTML element you use.
When creating a template, a LitElement syntax is required for all properties, events and methods that are present in the template. You can add ANY standard or custom HTML elements in the template.
Grid Cell with Image and Text
The template that displays an icon on the left side and a text in a grid cell is simple. You need to create a block using <div> element and inside the block put two <span> elements. One <span> element will display the text while the other will show an image. To show an icon you can set the element background to render a small image using CSS.
To set this template to be used only for cells in specific column, you can set condition using the cell.cid value that relates to the column id value. In this way, only cells that appear under specified column with matching cid value, will display the content based on created template.
Currently ReactJS doesn't have full support for Web Components. Mainly because of the way data is passed to the component via attributes and their own synthetic event system. For this reason, you can use available wrappers located under /integralui/wrappers directory, which are ReactJS components that provide all public API from specific IntegralUI component.
Depending on the cell.text and cell. indicator field values, the content in grid cells will change accordingly. The cell indicator value is used to determine the CSS class that will show an icon: green up arrow for positive numbers, and red down arrow for negative numbers.
Progress Bar in Grid Cell
In order to show a progress bar inside the grid cell, a paragraph element is used with its width and background is set dynamically depending on cell value. For this purpose, you can use LitElement's classMap function to dynamically change the CSS class for the HTML element.
In this case, the indicator value determines the background color of the progress bar. If the indicator value is positive, the progress bar will appear in blue, otherwise in orange. The current progress value is based on cell value field, which is used to calculate the progress bar width.
Instead of using a template to add a progress bar to grid cells, you can use the built-in ProgressBar editor for Grid component.
How to Add Button to Grid Cell
In similar way like in previous cases, to add a button in the grid cell, you can create a template that uses the standard <button> element.
Whenever this button is clicked, the deleteRow function will execute. Inside this function, you need to call the removeRow method and update the layout of the grid component using the reference to the Grid element. In this example, this function removes the row to which this button belongs.
How to Get a Reference to the Grid Element
Depending on whether you use vanilla JavaScript or a framework like Angular, React or Vue, a reference to the Grid element is created differently.
In JavaScript, you can find the Grid element by using querySelector function and specifying a selector, whether that is the element's id attribute, a class, using the element tag <iui-grid> etc.
In Angular, you need to set a custom variable in element tag, like #grid. Then use ViewChild with this variable name to create a reference to the Grid element.
In ReactJS, you need to set the ref={this.gridRef} in HTML and then create the reference by calling the React.createRef() method.
In VueJS, you need to set a custom variable in element tag using ref attribute, for example ref="grid". Then to access the Grid elements public methods, you can use the this.$refs.grid propety.
Conclusion
By creating custom templates, you can add any number of different HTML elements and arrange them in different layouts within the grid cell space. IntegralUI Grid compoennt for JavaScript, Angular, React and Vue allows you to customize the grid layout in many ways. You can have cells that shows text in multiple lines, with images, buttons, progress bars or any other custom editors.
IntegralUI Web is a suite of native web components that includes the Grid. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.