Edit Grid Cells using Check Box
To add a checkbox to column cells in IntegralUI Grid component is simple. You can use the built-in CheckBox editor that will appear in all cells of specified column or modify the cell template. Each cell has a template where you can insert the standard HTML input element as a checkbox, or create and add a custom component or element that will act as a checkbox. In following sections, you will learn how to use the CheckBox editor and how to change its appearance.
The sample code below shows how to add a check box to grid cells is available in each JavaScript framework: Angular, React and Vue.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In above demo, the Grid has one column with check boxes. If checkbox in column header is clicked, all checkboxes will become checked or unchecked.
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 Enable CheckBox Editor for Grid Columns
To enable the CheckBox editor, at first you need to set the editorType of column to CheckBox. Depending on editing mode (Batch, Form, Inline or Custom) and editor settings, a check box will appear in column cells.
In addition, checkbox can have two or three state values, which among others you can set it up from editorSettings field of column object. The following settings are allowed:
- threeState - determines whether check box can have two or three-state values, by default is false
- visible - determines when editor becomes visible: always, click, hover or none
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.
Add CheckBox in Column Header
Setting the column editor type to be a CheckBox will add check boxes to each cell for that column. However, the check box will not appear in column header. To have a check box in column header, you can modify the header template.
The grid can accept any custom content add to header template. To determine which column header you want to modify, you can set a condition using the column id. In this way, the template will be applied only for column(s) that match the specified condition, the other columns will display default content, which is just the header label.
When setting the template, you can use the IntegralUI CheckBox component, the input element or any other 3rd party component.
Handling Check Box Events from the Grid
At this stage, the column header will show a check box, but it's not yet functional. Next, you need to handle the checkStateChanged event (for two-state checkbox is checkedChanged event), where depending on the current state of checkbox in column header, update checkboxes in all column cells.
Also, any change to check box value column cells requires an update to checkbox in column header. For this purpose, because in this case a CheckBox editor is setup, you need to handle the valueChanged event from the Grid, which fires whenever a cell value changes.
In this example, the checkbox in column header has three-states values (checked, indeterminate and unchecked) and the check boxes in column cells have two-state values (true or false). This is because, some of column cells can be checked while others unchecked, which means that checkbox in column header should display indeterminate value if not all column cells are checked. To update the check value in column header, you can use updateColumnCheckValue function.
In this way, any change from column header affects check boxes in column cells and vice versa.
How to Customize the CheckBox
You can change appearance of CheckBox editor by modifying the built-in CSS classes. To do this, you need to create a custom CSS file, add your changes to editor styles and apply them to the Grid customStyle property. This will override the default appearance.
For example, you can use a different image for each state of the checkbox:
Conclusion
Grid component comes with built-in CheckBox editor that allows you to edit Boolean values in grid cells. The check box can have two or three-state values and in addition you can modify the column header using a template to show a checkbox. Finally, to change the check box appearance, you can apply custom CSS to the Grid.
IntegralUI Web is an UI library 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.