Slider as Cell Editor in Grid Component

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.

Related: How to Add a Progress Bar to Grid Cells

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. There is a sample code below written in JavaScript, Angular, React and Vue.

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.

The complete sample code is available in Quick Start application as part of IntegralUI Web library.

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.

• JavaScript
• Angular
• React
• Vue

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:

• JavaScript
• Angular
• React
• Vue

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

• JavaScript
• Angular
• React
• Vue

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:

• JavaScript
• Angular
• React
• Vue

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.

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.