LIDOR SYSTEMS

Advanced User Interface Controls and Components

Column Templates in AngularJS Grid

Created: 15 October 2015

Column header and footer in AngularJS Grid directive by default show only one-lined text. If we want to add custom content in grid columns, we need to use templates. Each column header and footer can use the same or different template.

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

As above demonstration shows, we have columns with headers showing multiple lines of text, text and an icon and custom footer with button and label.

Column Header Template with Multi Line Text

In case where we want to have a grid column which header title is displayed in multiple lines, we will create a template consisting of two or more paragraphs.

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

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

<div class="column-header">

<p>This is a column with longer text</p>

<p>Second line</p>

</div>

</script>

.column-header

{

margin: 0;

padding: 0;

}

.column-header p

{

margin: 0;

padding: 0;

}

.column-header p:hover

{

color: white !important;

}

.column-header p:first-child

{

font-weight: bold;

}

.column-header p:last-child

{

color: #008000;

}

Note By creating this template as part of the page, it will be available in template cache, so that AngularJS can quickly retrieve it.

Each template will have a unique identifier, and we will use it to link the column with the template. In case of grid column with multi-lined text, as identifier we will use the 'column-two-lines.html' string.

Related: Add Menu Button to Column Header

Column Header with Text and Icon

Similar to above example, we will create a template consisting of single paragraph with text and icon inside it. As icon, we can use an image or in this case a span element, where an icon is used as a background.

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

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

<div class="column-header">

<p class="check-content">In convallis tellus a mauris <span class="icons more-info"></span></p>

</div>

</script>

.check-content

{

font-style: italic;

font-weight: normal !important;

color: #800000 !important;

}

.more-info

{

background-position: -16px -80px;

}

.more-info:hover

{

background-position: 0 -80px;

}

As identifier for this template, we will use the 'column-icon.html' string.

Related: Add CheckBox to Column Header in AngularJS Grid

Column Footer Template with Button and Label

Next, as footer in first column, we will create a template consisting of a button and a paragraph showing the number of visible and total rows present in the grid.

<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[0].onCount()">Count</button>

<p>Visible Rows: {{columns[0].counter.rowCount}} / {{columns[0].counter.totalCount}}</p>

</div>

</script>

.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;

}

In order for this to work, we must add referencing object in our first column, so that when column is created, they are linked with object in footer template.

As identifier for this template, we will use the 'footer-count.html' string.

Link Columns with Templates

Now we can create the list of grid columns. By using template identifiers, we will link each column header and/or footer to specific template.

angular

.module("appModule", ["integralui"])

.controller("appCtrl", ["$scope", "IntegralUITreeGridService", "$timeout", function($scope, $gridService, $timeout){

// A unique identifier of the Grid directive

$scope.gridName = "gridSample";

 

// An array object that holds the grid columns

$scope.columns = [

{

headerTemplate: "'column-two-lines.html'",

headerAlignment: 'center',

width: 350,

footerTemplate: "'footer-count.html'",

counter: {

rowCount: 0,

totalCount: 0

},

onCount: function(){

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

var currentList = $gridService.getFlatList($scope.gridName);

 

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

$scope.columns[0].counter.rowCount = currentList.length;

}

},

{ headerTemplate: "'column-icon.html'", headerAlignment: 'center', width: 270 },

];

 

// An array object that holds the grid rows

$scope.rows = [];

 

// Update data in the footer

var initTimer = $timeout(function(){

$scope.columns[0].onCount();

$timeout.cancel(initTimer);

}, 100);

}]);

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

<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" allow-focus="false"></iui-treegrid>

</div

The referencing object for the footer template is also created here, along with the function called whenever the footer button is clicked.

Note This must be set inside the columns structure, because when grid is updated and its layout is created, during compilation of the template the internal scope for columns is used, not the parent scope. If referencing object is placed outside the columns structure, it will not be recognized.

When footer button is clicked, it wil calculate the total and current number of visible rows. For this purpose, we are using the getFlatList method, which returns a linear list of all rows present in tree structure, and also a linear list of all currently visible rows. This allows us to navigate through the whole tree structure, as quickly as possible.

Conclusion

By using templates, we can add custom content in column header and footer of the Grid directive, resulting in further extending and customizing the appearance and functionality of the Grid in whole.

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.