LIDOR SYSTEMS

Advanced User Interface Controls and Components

Column with Fixed Width in Tree Grid for AngularJS

Created: 24 April 2015

By default, columns in Tree Grid directive for AngularJS are all resizable. You can change their width either through code or by the end user by simply click on left or right side of column header and move in either direction. In some cases, we may need to fix a specific column and prevent it from resizing. In following sections of this article, we will show you how to do that.

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




As demonstration above shows, you can select a column by clicking on its header or choosing it from combo box on right panel. Then by clicking on 'Is Width Fixed' check box, a column will become fixed or not. Furthermore, by clicking on the button, you can lock or unlock all columns in the Tree Grid.

Related: Angular Grid Columns Fixed on Side

Behind the scene, locking of columns is done by changing the value of fixedWidth field of each column object to true or false. For example:

column.fixedWidth = true;

Whenever you want to lock a specific column and prevent it from resizing, you only need to change this field value to true. In order for all columns to become fixed, you need to set this for all of them

Here is the complete sample code:

angular

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

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

$scope.gridName = "gridSample";

$scope.btnText = "Lock All Columns";

$scope.columnFixed = false;

 

var supressCallback = false;

 

$scope.columns = [

{ headerText: 'Header1', footerText: 'Footer1', width: 200 },

{ headerText: 'Header2', footerText: 'Footer2', width: 250 },

{ headerText: 'Header3', footerText: 'Footer3', width: 120 }

];

 

$scope.rows = [

{

id: 1,

text: "Item1",

cells: [{ text: "Item11" }, { text: "Item12" }, { text: "Item13" }],

rows: [

{ id: 11, pid: 1, text: "Item11", cells: [{ text: "Item111" }, { text: "Item112" }, { text: "Item113" }] },

{

id: 12,

pid: 1,

text: "Item12",

cells: [{ text: "Item121" }, { text: "Item122" }, { text: "Item123" }],

rows: [

{ id: 121, pid: 12, text: "Item121", cells: [{ text: "Item1211" }, { text: "Item1212" }, { text: "Item1213" }] },

{

id: 122,

pid: 12,

text: "Item122",

cells: [{ text: "Item1221" }, { text: "Item1222" }, { text: "Item1223" }],

expanded: false,

rows: [

{ id: 1221, pid: 122, text: "Item1221", cells: [{ text: "Item12211" }, { text: "Item12212" }, { text: "Item12213" }] },

{ id: 1222, pid: 122, text: "Item1222", cells: [{ text: "Item12221" }, { text: "Item12222" }, { text: "Item12223" }] }

]

},

{ id: 123, pid: 12, text: "Item123", cells: [{ text: "Item1231" }, { text: "Item1232" }, { text: "Item1233" }] }

]

},

{ id: 13, pid: 1, text: "Item13", cells: [{ text: "Item131" }, { text: "Item132" }, { text: "Item133" }] },

{

id: 14,

pid: 1,

text: "Item14",

cells: [{ text: "Item141" }, { text: "Item142" }, { text: "Item143" }],

rows: [

{ id: 141, pid: 14, text: "Item141", cells: [{ text: "Item1411" }, { text: "Item1412" }, { text: "Item1413" }] },

{ id: 142, pid: 14, text: "Item142", cells: [{ text: "Item1421" }, { text: "Item1422" }, { text: "Item1423" }] }

]

}

]

},

{

id: 2,

text: "Item2",

cells: [{ text: "Item21" }, { text: "Item22" }, { text: "Item23" }],

expanded: false,

rows: [

{ id: 21, pid: 2, text: "Item21", cells: [{ text: "Item211" }, { text: "Item212" }, { text: "Item213" }] },

{ id: 22, pid: 2, text: "Item22", cells: [{ text: "Item221" }, { text: "Item222" }, { text: "Item223" }] },

{

id: 23,

pid: 2,

text: "Item23",

cells: [{ text: "Item231" }, { text: "Item232" }, { text: "Item233" }],

expanded: false,

rows: [

{ id: 231, pid: 23, text: "Item231", cells: [{ text: "Item2311" }, { text: "Item2312" }, { text: "Item2313" }] },

{ id: 232, pid: 23, text: "Item232", cells: [{ text: "Item2321" }, { text: "Item2322" }, { text: "Item2323" }] }

]

}

]

},

{ id: 3, text: "Item3", cells: [{ text: "Item31" }, { text: "Item32" }, { text: "Item33" }] }

];

 

var initTimer = $timeout(function(){

$scope.selColumn = $scope.columns[0];

 

$timeout.cancel(initTimer);

}, 1);

 

$scope.onAfterSelect = function(e){

if (supressCallback)

return;

 

if (e.object && e.object.type == 'column'){

$scope.selColumn = $gridService.selectedColumn($scope.gridName);

$scope.$apply();

}

}

 

$scope.$watch("selColumn", function(newValue, oldValue){

if (newValue != oldValue){

supressCallback = true;

$gridService.selectedColumn($scope.gridName, newValue);

supressCallback = false;

 

$gridService.updateView($scope.gridName);

}

});

 

$scope.lockAllColumns = function(){

$scope.columnFixed = !$scope.columnFixed;

$scope.btnText = $scope.columnFixed ? "Unlock All Columns" : "Lock All Columns";

 

for (var j = 0; j < $scope.columns.length; j++)

$scope.columns[j].fixedWidth = $scope.columnFixed;

}

}]);

<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

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

<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" after-select="onAfterSelect(e)" grid-lines="gridLines" ></iui-treegrid>

<div>

<label>Selected Column: </label>

<select ng-model="selColumn" ng-options="column.name for column in columns"></select>

<label><input type="checkbox" ng-click="toggleFixed()" ng-model="selColumn.fixedWidth" value="false"/> Is Width Fixed</label><br /><br /><br />

<button ng-click="lockAllColumns()" ng-model="btnText">{{btnText}}</button>

</div>

</div>

</body>

</html>

.directive

{

border: thin solid #dadada;

width: 600px;

height: 350px;

}

select

{

margin: 5px 0 15px 0;

width: 100px;

}

button

{

width: 100%;

padding: 5px;

}

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.