Slider as Editor in Grid Cells

To visualize the progression of an operation in Grid component you can use either a ProgressBar or a Slider. However, ProgressBar is read-only showing the current progression stage, while with Slider you can change the progression on demand.

In sections below you will learn how to add a slider to grid cells and change its appearance using custom CSS styles. In addition, the Slider can appear as progress bar on demand, for example for parent rows where progression value is aggregated from child rows.

TreeGrid component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

In this demo, the Progress column displays a slider visualizing the completion of specific operation. You can change the progression using the Slider from 0 to 100%. This also changes the progression value of parent rows. Depending on current state, the progression is displayed in different colors: red, orange, yellow, green and blue. For parent rows, the progress value is aggregated from its children, using custom function.

Grid Cells with Slider

To enable the Slider editor for Grid cells in specific column, you need to set the editorType field of column object to Slider. After that, you can set the cell value field with a any number from 0 to 100. This will update the slider in each cell separately based on the cell value.

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 modify the behavior of the Slider editor, you can apply additional settings. You can do this through editorSettings field of the column object. The following options are available:

  • editOnFocus - shows the editor when cell is focused
  • max - specifies the maximum value, default is 100
  • min - specifies the minimum value, default is 0
  • showProgress - changes the Slider to read-only and set appearance as ProgressBar
  • visible - determines when editor becomes visible: always, click, hover or none

Because progression value for cells in parent rows is calculated based on value from child rows, the cell object contains only the cid field set with value equal to the column id value.

The cid field is required to create a link between the cell and column under which cell value is displayed. More information is available here: Grid Data Structure.

To calculate the progress value of parent rows, you can create an aggregation function, which returns an average value of progression from its children:

How to Change Slider Appearance

To change the Slider appearance, you can modify the built-in CSS classes and provide your own style settings. However, you can't apply a CSS style directly to the slider component, but you can create custom CSS file and apply it to the customStyle property of the Grid. This will override default appearance with your own changes:

  • call the updateView and move the focus to the treegrid cell in a timeout, or
  • call the updateLayout with await, and once completed proceed with focus setting

In addition, for parent rows that have progress bar displayed you can apply an inline style setting to the cell style field. Based on some condition, the progression color can change. For example, to show progression stages in different colors: red, orange, yellow, green and blue, you can apply a different inline style like this:

Conclusion

IntegralUI Tree Grid component has an option to show a Slider in grid cells and use it as editor. You only need to set the editor type for specific column to Slider. Next, the progression value is based on the cell value and the Slider in each cell will update accordingly. At last, you can use custom CSS styles to modify the Slider appearance or if it is a read only, show a ProgressBar instead in different colors based on current stage.

Sample code above is available in JavaScript, Angular, React and Vue. The TreeGrid is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.