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: 07 September 2015
Like any other HTML element, the AngularJS Grid directive can have its width and height set using CSS class or inline style settings. Setting the size in this way is static, and in some cases, we may need to resize the grid dynamically, for example when window size changes. In following sections, we will show you how to change the grid size on run-time.
Similar: Auto Size Columns to Fit Angular Grid Width
In order to resize the grid or any other HTML element, we are going to use the IntegralUI Resize directive. This is an attribute only directive and it can be applied to any HTML element or other AngularJS directives. Here is an example:
<div iui-resize="{ width: 0.75, ref: 'window' }"></div>
This directive can be set using an object or an inline expression (like in above code). The applied object can have 8 fields:
The ref field can accept one of these values:
In our case, we want to resize the grid based on window size, so we are using the 'window' value. In this way whenever the window size changes, the element will also resize. If you apply this to many elements, you can create a responsive UI.
In case of AngularJS Grid, instead of inline expression, we are going to use an object from the app controller.
angular
.module("appModule", ["integralui"])
.controller("appCtrl", ["$scope", "IntegralUITreeGridService", "$timeout", function($scope, $gridService, $timeout){
$scope.gridName = "gridSample";
$scope.columns = [
{ name: 'Column1', headerText: 'Header1', footerText: 'Footer1', width: "45%", minWidth: 150, maxWidth: 400 },
{ name: 'Column2', headerText: 'Header2', footerText: 'Footer2', width: "35%" },
{ name: 'Column3', headerText: 'Header3', footerText: 'Footer3', width: "20%" }
];
$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" }],
expanded: false,
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" }],
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(){
}, 1);
// Resize directive settings
$scope.ctrlResize = {
width: 0.4,
minWidth: 400,
ref: 'window'
}
}]);
<!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-flat-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" iui-resize="ctrlResize"></iui-treegrid>
</div>
</body>
</html>
/* Grid CSS styles */
.iui-treegrid-column-header-cell, .iui-treegrid-column-footer-cell, .iui-treegrid-row-cell-content
{
padding: 0;
}
As it is shown in the code, the Grid will occupy 40% of window client area. If height is not specified, then the Grid can have a height set in a CSS style (directive class), which will remain the same, regardless of window size changes.
Grid columns can have its width set in numeric, pixels or percentage format. We can use dynamic resizing feature in our advantage to adjust columns so that they always occupy the whole space of the Grid. In this case, whenever window resizes, the grid will also resize, and because columns have their width set in percents, they will resize.
In order columns to occupy the whole grid client area, the total amount of percentages must equal 100%. In our case, we have our columns set like this:
// Set column width in percentage, based on grid width
$scope.columns = [
{ name: 'Column1', headerText: 'Header1', footerText: 'Footer1', width: "45%" },
{ name: 'Column2', headerText: 'Header2', footerText: 'Footer2', width: "35%" },
{ name: 'Column3', headerText: 'Header3', footerText: 'Footer3', width: "20%" }
];
Note You may notice that columns may also resize by using mouse left-click and move, on column header border. This will replace their percentage values by static values. If we want to prevent this from happening, we must set the column fixedWidth field to true.
// Make column width to remain fixed
$scope.columns = [
{ name: 'Column1', headerText: 'Header1', footerText: 'Footer1', width: "45%", fixedWidth: true },
{ name: 'Column2', headerText: 'Header2', footerText: 'Footer2', width: "35%", fixedWidth: true },
{ name: 'Column3', headerText: 'Header3', footerText: 'Footer3', width: "20%", fixedWidth: true }
];
Related: Column with Fixed Width in Tree Grid for AngularJS
In cases where we want some columns to resize, while other to remain fixed (like columns with a check box), we can have some columns with width set in pixels while others set in percentages. Depending on requirements of your application, you can set this in your app code.
We can also set the range in which column width will change. By using the minWidth and maxWidth fields of column object, we can set the minimum and maximum width the specified column can have. In our example, this is set for the first column, which width will range from 150 pixels to 400 pixels:
// Set the range of acceptable values for width of the first column
$scope.columns[0] = {
name: 'Column1',
headerText: 'Header1',
footerText: 'Footer1',
width: "45%",
minWidth: 150,
maxWidth: 400
}
The above demonstration shows how grid and column resize dynamically whenever window size changes. By downloading the IntegralUI Studio for Web, you can get access to the complete source code of this sample.