Advanced User Interface Controls and Components

How to Change Expanding Column in Tree Grid for AngularJS

Created: 24 April 2015

Initially, Tree Grid directive for AngularJS has its first column set to show cells with expand box. In some cases you may need to have this changed so that expand boxes are show in some other column. For example, you may need to show a column with check boxes as first column, and then following with column with expand boxes.

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

Like it is show in above demonstration, from combo box on right panel, you can choose which column can become an expanding column, the one that will shows expand boxes in its cells. Tree Grid directive has a public method which called expandColIndex, which allows you to change the expanding column:


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

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

$scope.gridName = "gridSample";


// Sets the second column as expanding column

$gridService.expandColIndex($scope.gridName, 1);


// Updates the current view of the Tree Grid



<!DOCTYPE html>



<link rel="stylesheet" href="css/integralui.css" />

<link rel="stylesheet" href="css/integralui.treegrid.css" />

<link rel="stylesheet" href="css/themes/theme-blue.css" />

<script type="text/javascript" src="external/angular.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.lists.min.js"></script>

<script type="text/javascript" src="js/angular.integralui.treegrid.min.js"></script>



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

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




As it can be seen from code above, at first we are setting in which column expand boxes will appear, and then we are updating the current view of the Tree Grid in order to apply these changes.

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.