Edit Cells with Boolean Values using CheckBox Editor in Angular Grid

Created: 05 Feb 2019

In order to edit cells that have a Boolean value, you can use the CheckBox Editor that is part of angular Grid component. By applying the editor to a specific column, all cells in that column will display a check box. You can choose whether you want to have a two or three state checkboxes, this will determine whether grid cell has a Boolean value (true or false), or a String value ('unchecked', 'indeterminate' or 'checked').

Angular Grid Cells with CheckBox Editor

To edit Boolean values the best way is to use a check box. The CheckBox built-in editor is already optimized for use with large data sets. You only need to specify the column that will display a checkbox in its cells and provide the editor settings.

The CheckBox editor has the following settings:

• editorType - set to CheckBox
• editorSettings - specifies whether two or three state values are in use and the style of the editor

• Angular
• HTML

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: 1, headerText: "Order ID", width: 120 },
            { 
                id: 2, 
                contentAlignment: "center", 
                headerText: "Completed", 
                headerAlignment: "center", 
                editorType: IntegralUIEditorType.CheckBox,
                editorSettings: {
                    threeState: false
                },
                width: 80
            },
            { id: 3, headerText: "Company", width: 300 },
            { id: 4, headerText: "Date", headerAlignment: "center", contentAlignment: "center" },
            { id: 5, headerText: "Price", headerAlignment: "center", contentAlignment: "right" }
        ];
    }
}
                            

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

If you don't specify the threeState field or you set it to false, it means that two state Boolean values are in use: true or false. If threeState is to true, it means that three state values are in use: 'unchecked', 'indeterminate' and 'checked'.

How to Change CheckBox Appearance

To change the check box appearance, use the style field. The style has the following format:

• general - the name of CSS class for base check box appearance
• checked - the name of CSS class when check box is in checked state
• indeterminate - the name of CSS class when check box is in indeterminate state
• unchecked - the name of CSS class for base check box is in unchecked state

Using custom CSS classes you can change the appearance of the CheckBox. You can use any custom images for displaying the check mark in different states.

• Angular
• CSS

    . . .
                            
    editorSettings: {
        style: {
            checked: 'grid-cellchbox-checked',
            unchecked: 'grid-cellchbox-unchecked'
        }
    },

    . . .

                            

.grid-cellchbox-checked {
    background-image: url(integralui/resources/checkbox/checkbox-checked-4.png);
}
.grid-cellchbox-unchecked {
    background-image: url(integralui/resources/checkbox/checkbox-unchecked-4.png);
}
                            

In this case, the checkbox is represented by green accept and red cancel icons. You can use any other image that is more appropriate for your application.

Once editor settings are specified and the grid cells have its value field set to Boolean or String values depending on whether a two or three state check box is in use, the Grid will display the cell value accordingly. If the cell value is not specified, it means that it is false or 'unchecked'.

Clicking on check box in each cell will change the cell value accordingly. When this happens, the following events are fired:

• cellValueChanging - occurs before cell value changes
• cellValueChanged - occurs after the cell value is changed

You can handle these events in your code and intercept the change of cell value, cancel the event or provide additional actions on your side.

• Angular
• HTML

valueIsChanging(e: any){
    console.log("cellValueChanging fired: ", e);
}

valueHasChanged(e: any){
    console.log("cellValueChanged fired: ", e);
}
                            

<div class="app-block" #application>
    <iui-grid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" (cellValueChanging)="valueIsChanging($event)" (cellValueChanged)="valueHasChanged($event)" #grid>
        <ng-template let-column [iuiTemplate]="{ type: 'header' }">
            <span class="grid-cellchbox-label">{{column.headerText}}</span>
        </ng-template>
        <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
            <span class="grid-cellchbox-label">{{cell.text}}</span>
        </ng-template>
    </iui-grid>
</div>
                            

Conclusion

Editing boolean values in cells of IntegralUI Grid for Angular is simple using the built-in checkbox editor. You can have two or three state checkboxes in cells of specified column. If the default check box appearance is not suitable for your project, you can change it using custom images within CSS styles. Finally, any change to the cell value with a check box is accompanied with events that you can handle in your code.

The Grid component is part of IntegralUI Web.