LIDOR SYSTEMS

Advanced User Interface Controls and Components

Add CheckBox to Column Header in AngularJS Grid

Created: 23 October 2015

Using templates, we can add any kind of custom content to column header in AngularJS Grid. In case of a checkbox, we will use the IntegralUI CheckBox directive, which comes with built-in functionality and customizable appearance.

Grid directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps

As above demonstration shows, the header of first column displays a checkbox which when clicked, it will change the value of all checkboxes in column cells. In addition, the footer of second column displays how many rows are checked.

Create a Template for CheckBox Column

In our case, the column header only will display one checkbox. Therefore, we need only single instance of CheckBox directive:

<div ng-app="appModule" ng-controller="appCtrl">

<script type="text/ng-template" id="column-check.html">

<iui-checkbox name="{{checkName}}" checked-changed="columns[0].onColumnCheck(e)"></iui-checkbox>

</script>

</div>

As it can be seen from code, the syntax is very simple: we only have a box without text and a handler for an event that is fired whenever a checkbox changes its value. See more below on how this event is handled.

Next we need to link this template with the grid column. We will use the template identifier as a value of headerTemplate field of column object:

$scope.columns[0] = {

headerAlignment: 'center',

contentAlignment: 'center',

width: 30,

fixedWidth: true,

headerTemplate: "'column-check.html'"

}

Adding CheckBox to Column Cells

The above template will only show a checkbox in column header, but cells will remain the same, showing only text value. In order to add a checkbox to column cells, we need to set the editorType field of column object to checkbox':

$scope.columns[0].editorType = 'checkbox';

Note We can customize the appearance of checkbox in column cells by setting the editorSettings field value. More information about this is available here: How to Add CheckBox Column in AngularJS Grid.

Handling CheckBox Events

In order to handle the checkedChanged event from CheckBox directive inside a template, we need to add an event handler function inside the column object. This will make sure the event and the function are linked, during compilation of the template.

$scope.columns[0].onColumnCheck = function(e){

var list = $gridService.getFlatList($scope.gridName, true);

for (var i = 0; i < list.length; i++)

list[i].cells[0].value = e.checked;

}

Whenever the checkbox in column header is clicked, checkbox in all column cells will also change their value to match the value of the header checkbox. This enables to mark all rows as checked or unchecked, as quickly as possible.

Template for Column Footer

Finally, template for the column footer contains a button and a label which will displays the total number of all and checked rows. The body of this template looks like this:

<div ng-app="appModule" ng-controller="appCtrl">

<script type="text/ng-template" id="footer-count.html">

<div class="column-footer">

<button class="inline-button" ng-click="columns[1].onCount()">Count</button>

<p>Checked Rows: {{columns[1].counter.checkCount}} / {{columns[1].counter.totalCount}}</p>

</div>

</script>

</div>

.column-footer

{

margin: 0;

padding: 0;

white-space: nowrap;

}

.column-footer p

{

display: inline-block;

margin: 0;

padding: 0;

}

.inline-button

{

background: #2455b0;

border: thin solid black;

color: white;

display: inline-block;

margin: 0 25px 0 3px;

width: 60px;

}

.inline-button:hover

{

background-color: #153268;

}

Whenever the button is clicked, the label will display the number of all and checked rows. This is handled by adding a function for click event of the button element.

$scope.columns[1] = {

headerText: "Header 2",

width: 350,

footerTemplate: 'footer-count.html'",

counter: {

checkCount: 0,

totalCount: 0

},

onCount: function(){

var list = $gridService.getFlatList(

$scope.gridName, true);

 

$scope.columns[1].counter.totalCount = list.length;

$scope.columns[1].counter.checkCount = 0;

 

for (var i = 0; i < list.length; i++){

if (list[i].cells[0].value)

$scope.columns[1].counter.checkCount++;

}

}

}

Conclusion

Templates allow us to add custom content to column header. In case of adding a checkbox is very simple, we can either use the CheckBox directive or even standard input element, the result is the same.

Did you Like this Article?


Enter your e-mail address below and you will receive latest articles as well as news on upcoming events and special offers.