Advanced User Interface Controls and Components
Created: 17 January 2018
Updated: 05 April 2019
To add a checkbox to column cells in IntegralUI Grid for Angular is simple. Each cell has a template where you can insert the standard HTML input element as a checkbox, or create and add a custom component or element that will act as a checkbox. In following sections, you will learn how to add a custom checkbox to all cells in specific column.
If you have any questions, don't hesitate to contact us at support@lidorsystems.com
In above demo, the Grid has one column with checkboxes. If checkbox in column header is clicked, all checkboxes will become checked or unchecked. Using the button on the right side of the grid, you can change the appearance of the checkboxes in the grid.
By default, each grid cell displays a label. Using the cell cid value (that relates to column id to which this cell belongs), you can alter the content of the cell within its template. In this case, all cells with id set to 1, instead of displaying a label, will display a checkbox.
As a checkbox, either you can use the HTML input element, or as it is in this example, a span element where for its background a predefined image is used. Depending on check state: checked or unchecked, you need to have two different images.
<iui-grid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" [rowHeight]="22" #grid>
<ng-template let-column [iuiTemplate]="{ type: 'header' }">
<span [ngSwitch]="column.id">
<span *ngSwitchCase="1">
<span class="grid-cbxcol-checkbox" [ngClass]="{ 'grid-cbxcol-checkbox-true': column.value, 'grid-cbxcol-checkbox-custom': isCustomCheckBoxActive, 'grid-cbxcol-checkbox-custom-true': column.value && isCustomCheckBoxActive }" (mousedown)="columnCheckClicked(column)"></span>
</span>
<span *ngSwitchDefault>
{{column.headerText}}
</span>
</span>
</ng-template>
<ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
<span [ngSwitch]="cell.cid">
<span *ngSwitchCase="1">
<span class="grid-cbxcol-checkbox" [ngClass]="{ 'grid-cbxcol-checkbox-true': cell.value, 'grid-cbxcol-checkbox-custom': isCustomCheckBoxActive, 'grid-cbxcol-checkbox-custom-true': cell.value && isCustomCheckBoxActive }" (mousedown)="checkBoxClicked(cell)"></span>
</span>
<span *ngSwitchCase="5">
<span class="grid-cbxcol-cell-label">{{cell.value}}</span>
</span>
<span *ngSwitchDefault>
<span class="grid-cbxcol-cell-label">{{cell.text}}</span>
</span>
</span>
</ng-template>
</iui-grid>
/* CheckBox Cell */
.grid-cbxcol-checkbox
{
background: url(app/integralui/resources/checkbox/checkbox-unchecked-1.png) no-repeat 0 0;
display: inline-block;
padding: 0;
margin: 4px 7px 0 7px;
width: 16px;
height: 16px;
}
.grid-cbxcol-checkbox-true
{
background: url(app/integralui/resources/checkbox/checkbox-checked-1.png) no-repeat 0 0;
}
In similar way, each cell in grid header can have a custom content, determined by its template. Depending on column id value, the column header displays a label or a checkbox.
<iui-grid [appRef]="applicationRef" [controlStyle]="gridStyle" [columns]="columns" [rows]="rows" [showFooter]="false" [rowHeight]="22" #grid>
<ng-template let-column [iuiTemplate]="{ type: 'header' }">
<span [ngSwitch]="column.id">
<span *ngSwitchCase="1">
<span class="grid-cbxcol-checkbox" [ngClass]="{ 'grid-cbxcol-checkbox-true': column.value, 'grid-cbxcol-checkbox-custom': isCustomCheckBoxActive, 'grid-cbxcol-checkbox-custom-true': column.value && isCustomCheckBoxActive }" (mousedown)="columnCheckClicked(column)"></span>
</span>
<span *ngSwitchDefault>
{{column.headerText}}
</span>
</span>
</ng-template>
<ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
<span [ngSwitch]="cell.cid">
<span *ngSwitchCase="1">
<span class="grid-cbxcol-checkbox" [ngClass]="{ 'grid-cbxcol-checkbox-true': cell.value, 'grid-cbxcol-checkbox-custom': isCustomCheckBoxActive, 'grid-cbxcol-checkbox-custom-true': cell.value && isCustomCheckBoxActive }" (mousedown)="checkBoxClicked(cell)"></span>
</span>
<span *ngSwitchCase="5">
<span class="grid-cbxcol-cell-label">{{cell.value}}</span>
</span>
<span *ngSwitchDefault>
<span class="grid-cbxcol-cell-label">{{cell.text}}</span>
</span>
</span>
</ng-template>
</iui-grid>
In current state, the checkbox is not yet fully functional. You need to handle mousedown event so that whenever checkbox is clicked, the value of corresponding cell needs to change.
Note The value field is a general field used to store any custom objects or values. There are no restrictions, you can use other fields in your applicaton, for example a custom field named checkBoxValue. It is totally up to you.
Because there are two templates with a checkbox, one for row cells and other for column header cell, you need to handle two events. The one in row cells will only change the cell value, while clicks from the column header checkbox, will change the value of all checkboxes in row cells.
public checkBoxClicked(cell: any){
if (cell){
let currentValue = cell.value == true ? true : false;
cell.value = !currentValue;
}
}
public columnCheckClicked(column: any){
if (column){
let currentValue = column.value == true ? true : false;
column.value = !currentValue;
let list = this.grid.getList();
for (let i = 0; i < list.length; i++){
let cell = this.grid.getCellByColumnId(list[i].cells, 1);
if (cell)
cell.value = column.value;
}
}
}
As mentioned before, there are different ways to create a checkbox: input element, span element with a checkbox image as a background, a component that acts and appears as a checkbox etc. Depending on the type of the checkbox you are using, customization may be different.
In case of a span element, you only need to change the url location of the background image and its size. As it is shown in this example, by clicking on 'Custom CheckBoxes' button, you can quickly change the appearance of the checkboxes in the Grid.
public isCustomCheckBoxActive: boolean = false;
onCheckChange(e: any){
this.grid.updateLayout();
}
<span class="grid-cbxcol-checkbox" [ngClass]="{ 'grid-cbxcol-checkbox-true': cell.value, 'grid-cbxcol-checkbox-custom': isCustomCheckBoxActive, 'grid-cbxcol-checkbox-custom-true': cell.value && isCustomCheckBoxActive }" (mousedown)="checkBoxClicked(cell)"></span>
<label><input type="checkbox" [(ngModel)]="isCustomCheckBoxActive" (ngModelChange)="onCheckChange($event)"/>Custom CheckBoxes</label>
.grid-cbxcol-checkbox-custom
{
background: url(app/integralui/resources/checkbox/checkbox-unchecked-5.png) no-repeat 0 0;
width: 38px;
height: 14px;
}
.grid-cbxcol-checkbox-custom-true
{
background: url(app/integralui/resources/checkbox/checkbox-checked-5.png) no-repeat 0 0;
}
Depending on isCustomCheckBoxActive value, a different class is applied to the span element. In addition of whether the checkbox is checked or unchecked, this is determined by cell value.
Note Whenever there is a change in grid layout, different template content or changes in CSS classes for specific elements, it is a good practice to update the grid layout. Like it is shown in above code, whenever isCustomCheckBoxActive value changes, the updateLayout method is called.
IntegralUI Grid is specifically built to handle different kind of elements or other Angular components in its cells. In case of a checkbox, the process to add one is a straightforward. You can modify the template for each grid cell independently and add any custom HTML elements.
There are many ways to create a checkbox in Angular. Either using the standard HTML input element, a custom CheckBox component or by modifying the span element via CSS. In each case, you only need to insert the resulting element or component in the cell template.
The Grid component is part of IntegralUI Web.