Highlight Rows in Tree Grid using CheckBox Column
To select or highlight a row in IntegralUI Tree Grid component, you can use built-in selection options that allows you to select one or multiple rows, or create your own functionality.
In this article, you will learn how to highlight a row by clicking a checkbox in first grid column. In following sections below, you will find sample code in JavaScript, Angular, React and Vue.
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
When you click on a checkbox in specific row, it will become highlighted. To distinguish highlighted state of a row from a normal state, a custom style is applied to highlighted rows. In this example, all rows affected have a green background with white text color in bold.
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 Highlight a Row in Tree Grid
At first, you will need to add a checkbox to the cells in first column. You can either use a custom template where you can add a check box element or easily by using the built-in CheckBox editor. You only need to specify the editorType field of first column to be a CheckBox.
When using templates, as a checkbox you can also use the standard <input> HTML element or a <span> element with a background image that changes based on whether the checkbox is checked or not.
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.
Once a checkbox is present in the Grid , you need to handle valueChanged event for cells with a checkbox and apply a custom style that will highlight rows. To determine the state of row, you can add a custom field to the row object, let's call it highlight. Whenever row is highlighted by clicking on a checkbox, the value of highlight field is set to true. When row is no longer highlighted, the value is set to false.
Depending of highlight field value, a different style object is applied to the row style field. This is directly linked to the internal style settings of the row element. Therefore, you can add any object to the style field in standard CSS format for inline styles. Once the style object is applied to the row style field, you need to refresh the grid, so that the change is applied.
Because this is a Tree Grid, you may have parent and child rows. To modify the state of child rows whenever a checkbox from parent row is clicked, you can cycle through all child rows of specific parent row, and update the value of highlight field.
Conclusion
Although there is a built-in functionality in the IntegralUI Tree Grid component for JavaScript, Angular, React and Vue that allows you to select one or multiple rows, you can also create your own custom functionality that will highlight rows on demand. This can be done using a checkbox column or in any other way that is best suitable for your application. You only need to apply a different style for affected rows and refresh the grid.
Tree Grid is part of IntegralUI Web, a suite of native web components that you can use to develop applications in Angular, React, Vue or other JavaScript frameworks.