Grid Header and Footer with Custom HTML Elements
Using templates, we can add any kind of custom HTML elements to column header and footer in Grid component for JavaScript, Angular, React and Vue. Each column can have its own template with different content than other columns.
You will find sample code that shows how to create grid with custom header and footer in JavaScript, Angular, React and Vue, in following sections below.
a suite of native Web Components for Angular, React and Vue
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
As above demonstration shows, the header of first column displays a checkbox which when clicked, it will change the value of all checkboxes in column. In addition, the footer of second column displays how many rows are checked.
The header of second column displays text in multiple lines, while the last column has a text with an icon, which when hovered will display a tooltip with more information.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
How to Create a Grid Header Template for CheckBox Column
Current header template in use determines the content displayed inside the column header. By default, the header template only includes the column title, but you can modify it by providing your own template. In this case, the header of first column displays a checkbox. To add a checkbox to column header you can use the IntegralUI CheckBox component:
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.
The column.id field is used to set a condition when this template is applied. In this case, you will display a checkbox only in the first column, that is the column with id value set to 1.
As the code shows, there is a check box with some properties set of which the most important one is checkState that determines the current state of the check box: unchecked, indetermined or checked. This property value is bound to the column.checkState field. So whenever, column.checkState field value changes, the checkbox in column header will show it.
You also need to handle the checkStateChanged event so that when checkState proprety value changes (for example by a click on the checkbox), you can update the value of checkboxes in all cells for this column.
To keep the code simple in this article, some of the code fragments are excluded. You can find the complete code for updating check boxes for all column cells in this sample file as part of QuickStart project for specific framework in use: JavaScript, Angular, React or Vue.
Grid with Custom Column Footer
In similar way like with column header, each footer can have its own template. By default the footer template is empty and may display the column footer text if applied.
In this example, only the footer of second column has a custom content. The template for column footer contains a button and a label that shows how many rows are checked from the total number of all rows present. The footer template looks like this:
Whenever the button is clicked, the label will display the number of currently checked rows. To show this number in the footer, you need to handle the button click event:
Inside this event handler, to increase performance instead of cycling through the whole tree hierarchy and counting checked rows, a linear list of all tree hierarchy of grid rows is used, returned by a call to getFullList method. If a row is checked, it is added to the summary of all checked rows stored in the checkedRowsCount variable. This variable is part of the footer template, updated whenever this button is clicked.
Conclusion
Templates allow you to add custom HTML elements to column header and footer in Grid component. You can create any number of different templates and apply them to specific columns based on custom conditions set in your code. In addition, you can also add some user interaction by handling events from custom elements present in the header and footer templates. Sample code is available for vanilla JavaScript, Angular, React and Vue.
A sample code is available in JavaScript, Angular, React and Vue that shows how to create grid with custom header and footer. The Grid is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.