LIDOR SYSTEMS

Advanced User Interface Controls and Components

Highlight Rows in Angular Tree Grid using CheckBox Column

Created: 11 April 2018

To select or highlight a row in IntegralUI TreeGrid component for Angular, you can use built-in selection options that allows you to select one or multiple rows, or create your own functionality. In this article, you will learn how to highlight a row by clicking on a checkbox in first grid column.

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

If you click on a checkbox in a row that has children, all child rows will become highlighted at once. In similar way, clicking on a checkbox in column header will select or deselect all rows. To distinguish highlighted state of a row from normal state, a custom style is applied to highlighted rows. In this example, all rows affected have a green background with white text color.

How to Highlight a Row from CheckBox Column

At first, you will need to add a checkbox to the cells in first column. Each cell has a separate template, where you can use the ngSwitch directive to determine the cell, based on its cid value (that is the column id value).

As a checkbox you can use the standard <input> HTML element or as in this case a <span> element with a background image that changes based on whether the checkbox is checked or not.

<iui-treegrid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" [gridLines]="gridLines" [expandColumnIndex]="1" #treegrid>
<ng-template let-column [iuiTemplate]="{ type: 'header' }">
    <span [ngSwitch]="column.id">
        <span *ngSwitchCase="1">
            <span class="trg-hglrows-cell-checkbox" [ngStyle]="{ 'background-image': getCheckValue(column) }" (mousedown)="columnCheckClicked(column)"></span>
        </span>
        <span *ngSwitchDefault>
            <span>{{column.headerText}}</span>
        </span>
    </span>
</ng-template>
<ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
    <span [ngSwitch]="cell.cid">
        <span *ngSwitchCase="1">
            <span class="trg-hglrows-cell-checkbox" [ngStyle]="{ 'background-image': getCheckValue(cell) }" (mousedown)="checkBoxClicked($event, cell)" (mouseup)="checkBoxMouseUp($event)" (dblclick)="checkBoxDblClick($event)"></span>
        </span>
        <span *ngSwitchDefault>
            <span class="trg-rtng-cell-text">{{cell.text}}</span>
        </span>
    </span>
</ng-template>
</iui-treegrid>
                            
.trg-hglrows-cell-checkbox
{
    background: url('') no-repeat 0 0;
    display: inline-block;
    padding: 0;
    margin: 0 7px;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}
                            

Once you have the template ready, you need to add functionality that will update the checkbox appearance (different image for checked and unchecked state) and highlighting of clicked rows. To determine the state of row, you can add a custom field to the row object, let's call it highlight. Whenever row is highlighted by clicking on a checkbox, the value of highlight field is set to true. When row is no longer highlighted, the value is set to false.

private getCheckValue(obj: any){
    return obj && obj.value == true ? this.imageChecked : this.imageUnchecked;
}

checkBoxClicked(e: any, cell: any){
    if (cell){
        let currentValue = cell.value == true ? true : false;
        cell.value = !currentValue;

        let row = this.treegrid.findRowById(cell.rid);
        if (row.rows){
            this.highlightChildRows(row, cell.value);
        }
        else
            this.highlightRow(row, cell.value);

        e.stopPropagation();
    }
}

checkBoxMouseUp(e: any){
    e.stopPropagation();
}

private columnCheckClicked(column: any){
    if (column){
        let currentValue = column.value == true ? true : false;
        column.value = !currentValue;

        let list = this.treegrid.getFullList();
        for (let i = 0; i < list.length; i++){
            let cell = this.getCellWithCheckBox(list[i]);
            if (cell){
                cell.value = column.value;
                this.highlightRow(list[i], cell.value);
            }
        }
    }
}

private getCellWithCheckBox(row: any){
    let found: any = null;

    for (let j = 0; j < row.cells.length; j++){
        if (row.cells[j].cid == 1){
            found = row.cells[j];
            break;
        }

    }

    return found;
}

checkBoxDblClick(e: any){
    e.stopPropagation();
}
                            

Because this is a TreeGrid, you may have parent and child rows. To modify the state of child rows whenever a checkbox from parent row is clicked, you can cycle through all child rows of specific parent row, and update the value of highlight field.

Depending of highlight field value, a different style object is applied to the row style field. This is directly linked to the internal ngStyle directive of the row element. So you can add any object to the style field in format acceptable by the ngStyle directive. Once the style object is applied to the row style field, you need to refresh the grid, so that change is applied.

highlightRow(row: any, value: boolean){
    if (row){
        row.highlight = value;

        if (row.highlight)
            row.style = { background: '#009900', color: 'white' }
        else
            row.style = null;

         this.treegrid.refresh();
    }
}

highlightChildRows(parent: any, value: boolean){
    this.highlightRow(parent, value);

    for (let i = 0; i < parent.rows.length; i++){
        let childRow = parent.rows[i];

        let cell = this.getCellWithCheckBox(childRow);
        if (cell)
            cell.value = value;

        this.highlightRow(childRow, value);

        if (childRow.rows)
            this.highlightChildRows(childRow, value);
    }
}
                            

Conclusion

Although there is a built-in functionality in the IntegralUI TreeGrid component for Angular that allows you to select one or multiple rows, you can also create your own custom functionality that will highlight rows on demand. This can be done using a checkbox column or in any other way that is best suitable for your application. You only need to apply a different style for affected rows and refresh the grid.

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.