TreeGrid 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: 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.
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;
}