Grid directive is part of IntegralUI Studio for Web
a suite of UI Components for development of web apps
a suite of UI Components for development of web apps
Advanced User Interface Controls and Components
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.
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.
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'"
}
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.
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.
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++;
}
}
}
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.