How to Add a Progress Bar to Grid Cells

To visualize the progression of an operation in Grid component you can add a ProgressBar to each cell. You can use the built-in option for Grid columns and set the editor type to Progress. This will display a progress bar in column cells based on cell value.

You will find sample code that shows how to add a progress bar to grid cells in JavaScript, Angular, React and Vue, in following sections below. In addition, you will learn how to add a progress bar to grid cells and change its appearance using custom CSS styles.

Related: How to Change Progression with a Slider in Grid Cells

In this demo, the Progress column displays a progress bar visualizing the completion of specific operation. Depending on cell value, the progress is updated in different colors, where each color represents a progression stage: red, orange, yellow, green and blue.

For parent rows, the progress value is calculated from its children, using an aggregation function.

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

Grid Cells with Progress Bar

To show a progress bar in cells of specific column, you need to set the editorType field of column object to Progress. After that, you can set the cell value field with a number from 0 to 100. This will update the progress bar in each cell separately based on the cell value.

• JavaScript
• Angular
• React
• Vue

In code above, you will notice that cell in parent rows only have the cid field set, while the value field is excluded. This is because the progress value for parent rows is based on average progress values of its child rows, so it is not required to be set here.

The cid field is required to create a link between the cell and column under which cell value is displayed. More information on relation between column, row and cells 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 progress from its children. For example:

• JavaScript
• Angular
• React
• Vue

How to Change Progress Bar Appearance

By default, progress bar is displayed in gray colors (if a theme is not provided). If you want to change the progress bar appearance, you can use modify the built-in CSS classes with your own styles.

Two built-in CSS classes govern the appearance of the Progress Bar:

• iui-editor-progress - controls the overall appearance of the progress bar
• iui-editor-progress-content - controls the appearance of the progress value

You can't apply a CSS style to the progress bar directly, but you can create custom CSS file and apply it to the customStyle property of the Grid. The other way to modify the ProgressBar is to use custom properties. In this example, the progress bar doesn't have a border, its background is displayed in light gray color and the progress value is displayed in green.

• 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, 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 in different color: red, orange, yellow, green and blue, you can apply a different inline style like this:

• JavaScript
• Angular
• React
• Vue

Conclusion

There is a built-in option in IntegralUI Tree Grid component that allows you to add a Progress Bar to grid cells in simple way. You need to choose the column that will contain the progress bar and then just change its editorType to Progress. Next, the progress value is based on the cell value and will update for each cell accordingly. At last, you can use custom CSS styles to modify the Progress Bar appearance.

A sample code is available in JavaScript, Angular, React and Vue that shows how to add a progress bar to grid cells. The Tree Grid is a native Web Component, part of IntegralUI Web that you can use in any JavaScript framework.