How to Add a Progress Bar to Cells in Angular Grid

Created: 13 Feb 2019

To visualize the progress of an operation in angular Tree Grid 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.

In sections below you will learn how to add a progress bar to grid cells and change its appearance using custom CSS styles.

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 progress bar visualizing the completion of specific operation. Depending on cell value, the progress is updated.

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

Angular 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.

import { Component, enableProdMode, ViewChild, ViewContainerRef, ViewEncapsulation } from '@angular/core';
import { IntegralUIEditorType } from './integralui/components/integralui.core';

enableProdMode();

@Component({
    selector: 'iui-app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {
    @ViewChild('application', {read: ViewContainerRef}) applicationRef: ViewContainerRef;

    constructor(){
        this.columns = [
            { id: 2, headerText: "Summary", width: 400 },
            { 
                id: 3, 
                contentAlignment: "center", 
                headerText: "Progress", 
                headerAlignment: "center", 
                editorType: IntegralUIEditorType.Progress
            },
            { id: 4, headerText: "Status", headerAlignment: "center", contentAlignment: "center" },
            { id: 5, headerText: "Assignee", width: 125 }
        ];

        this.rows = [
            
            { 
                id: 1, 
                cells: [{ cid: 2, text: "Theme Park Construction" }, { cid: 3 }, { cid: 4, text: "In Progress" } ],
                rows: [
                    { 
                        id: 11,
                        cells: [{ cid: 2, text: "Site Preparations" }, { cid: 3 }, { cid: 4, text: "Open" }, { cid: 5, text: "Steven Beck" } ],
                        rows: [
                            { 
                                id: 111,
                                expanded: false,
                                cells: [{ cid: 2, text: "Location Map" }, { cid: 3 }, { cid: 4, text: "In Progress" } ],
                                rows: [
                                    { 
                                        id: 1111,
                                        cells: [{ cid: 2, text: "Relocate trees" }, { cid: 3, value: 100 }, { cid: 4, text: "Resolved" }, { cid: 5, text: "Unassigned" } ]
                                    },
                                    { 
                                        id: 1112,
                                        cells: [{ cid: 2, text: "Relocate Elves" }, { cid: 3, value: 78 }, { cid: 4, text: "Reopened" }, { cid: 5, text: "Bruno Klein" } ]
                                    },

            // . . .
        
        ];
    }
}
                            
<div class="app-block" #application>
    <iui-treegrid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" #treegrid>
        <ng-template let-column [iuiTemplate]="{ type: 'header' }">
            <span class="trg-cellprg-label">{{column.headerText}}</span>
        </ng-template>
        <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
            <span class="trg-cellprg-label">{{cell.text}}</span>
        </ng-template>
    </iui-treegrid>
</div>
                            

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.

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:

import { IntegralUITreeGrid } from './integralui/components/integralui.treegrid';
// . . .

@ViewChild('treegrid') treegrid: IntegralUITreeGrid;

ngAfterViewInit(){
    this.treegrid.selectedColumn = this.columns[0];

    this.rows.map(row => { 
        let progressCell = this.treegrid.getCellByColumnId(row.cells, 3); 
        progressCell ? progressCell.value = this.getParentProgressFromChildren(row) : null;
    });
}

getParentProgressFromChildren(parent: any){
    let progressCell = this.treegrid.getCellByColumnId(parent.cells, 3); 

    if (parent.rows && parent.rows.length > 0){
        let result = 0;
        parent.rows.map(row => {
            result += this.getParentProgressFromChildren(row); 
        })

        progressCell.value = result / parent.rows.length;
    }

    return progressCell.value || 0;
}
                            

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 custom CSS styles.

There are two built-in CSS classes that governs 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 use the controlStyle property of the angular Tree Grid component and CSS selector to modify the progress bar appearance. By specifying a custom control style to the Grid, you can also apply a different CSS styles for the progress bar. For example, when in normal mode change the CSS class for the grid to 'custom-grid-normal' and then you can apply different styles for the progressbar.

public gridStyle: any = {
    general: {
        normal: 'trg-cellprg-normal'
    }
}
                            
<div class="app-block" #application>
    <iui-treegrid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" #treegrid>
        <ng-template let-column [iuiTemplate]="{ type: 'header' }">
            <span class="trg-cellprg-label">{{column.headerText}}</span>
        </ng-template>
        <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
            <span class="trg-cellprg-label">{{cell.text}}</span>
        </ng-template>
    </iui-treegrid>
</div>
                            
.trg-cellprg-normal .iui-editor-progress {
    border: 0;
    background: #f5f5f5;
    padding: 0;
}
.trg-cellprg-normal .iui-editor-progress-content {
    background: #48c548;
}
                            

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.

Conclusion

There is a built-in option in IntegralUI Tree Grid for Angular 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.

The TreeGrid component is part of IntegralUI Web.

Newsletter


Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.
Name: Email: *
*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.