How to Disable Grid Rows on Demand
In general, if not set specifically the rows in Grid component are enabled. In some cases, you may need to disable any user interaction with data within the grid row. You can disable a row statically, within the data used to populate the grid, or you can change it on demand during run-time.
In this article, you will learn how to disable a grid row on demand using a checkbox within the grid. Whenever this checkbox is checked, the row is enabled, otherwise it becomes disabled. You will find a sample code below written 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
In this example, you can disable rows on demand in Tree Grid using column with custom check boxes. A row can become enabled/disabled depending on the state of its check box, checked/unchecked. Whenever a row is disabled, any interaction with that row is also disabled.
Instead of showing a check mark for checked state and an empty box for unchecked state of check boxes, you can use custom images. Depending on check box state, you can apply a different image. This is done by overriding the default styles of CheckBox with custom styles, which can be applied through code.
Following sections below contain sample code in JavaScript, Angular, React and Vue.
The complete sample code is available in Quick Start application as part of IntegralUI Web library.
Using a CheckBox to Disable Grid Rows
To add a checkbox to the each row in the Grid component, you can use the CheckBox editor. This will add a checkbox to each cell in specified column for each row.
Once you have checkbox present in the grid, you only need to handle changes to cell value whenever checkbox changes its state, from checked to unchecked or vice versa.
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.
To disable a row, you just need to set the enabled field of row object to false and update the grid view. This will make row unresponsive to user interaction and change its appearance so that it will be easily recognized among other rows. When disabled, a row appears with reduced opacity and uses gray colors.
In this example, when row is disabled, it also becomes collapsed. Because it is disabled, you cannot expand it by clicking on expand box, first you need to check the box, which will enable the row and then you can continue with expanding it.
Conclusion
IntegralUI Grid component for JavaScript, Angular, React and Vue comes with built-in feature that allows you to disable rows on demand, during run-time. You can choose how you want to disable rows, either by using a check box editor like in this example, or with any other way. In either case, the disabled state of a row is determined by the enabled field of the row object. If true or undefined, the row is enabled, otherwise is disabled.
IntegralUI Web is a suite of native web components that includes the Tree Grid. You can use it to develop web apps in Angular, React, Vue or any other JavaScript framework.