LIDOR SYSTEMS

Advanced User Interface Controls and Components

IntegralUI Web

Native Angular and AngularJS UI Components


TreeGrid / Columns Fixed on Side

Fixed on Side:





This example shows how to fix columns on left or right side in TreeGrid directive. On right panel you can find controls with which you can determine whether the column is fixed and on which side. By default column is not fixed.

Each column object has a field which allows you to set the side at which column will be fixed.

  • fixed - Determines the side at which column will be fixed. This field accepts one of the following values: 'none', 'left' or 'right'.

When column is fixed on left or right side, it is still resizable.

Column reordering is also avaliable withing the same group of columns base don their fixed value. However, you can't drag-drop a column fixed on left side and drop it over column which is not fixed or it is fixed on right side.

You can customize the appearance of fixed columns by using corresponding CSS styles. You can find more information in code of this sample.

<!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}}" class="directive" columns="columns" rows="rows" after-select="onAfterSelect(e)" show-footer="false"></iui-treegrid>

<div>

<label>Selected Column: </label>

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

<p class="alignBlock">Fixed on Side: </p>

<label class="fixedVal"><input type="radio" ng-model="fixedSide" value="none" />None</label>

<label class="fixedVal"><input type="radio" ng-model="fixedSide" value="left" />Left</label>

<label class="fixedVal"><input type="radio" ng-model="fixedSide" value="right" />Right</label><br />

</div>

</div>

</body>

</html>

angular

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

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

$scope.gridName = "gridSample";

$scope.fixedSide = 'none';

 

var supressCallback = false;

 

$scope.columns = [

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

{ name: 'Column2', headerText: 'Header2', footerText: 'Footer2', width: 90, fixed: 'left' },

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

{ name: 'Column4', headerText: 'Header4', footerText: 'Footer4', width: 100, fixed: 'right' },

{ name: 'Column5', headerText: 'Header5', footerText: 'Footer5', width: 120 }

];

 

$scope.rows = [

{

id: 1,

text: "Item1",

cells: [{ cid: 1, text: "Item11" }, { cid: 2, text: "Item12" }, { cid: 3, text: "Item13" }],

rows: [

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

{

id: 12,

pid: 1,

text: "Item12",

cells: [{ cid: 1, text: "Item121" }, { cid: 2, text: "Item122" }, { cid: 3, text: "Item123" }],

rows: [

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

{

id: 122,

pid: 12,

text: "Item122",

cells: [{ cid: 1, text: "Item1221" }, { cid: 2, text: "Item1222" }, { cid: 3, text: "Item1223" }],

expanded: false,

rows: [

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

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

]

},

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

]

},

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

{

id: 14,

pid: 1,

text: "Item14",

cells: [{ cid: 1, text: "Item141" }, { cid: 2, text: "Item142" }, { cid: 3, text: "Item143" }],

expanded: false,

rows: [

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

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

]

}

]

},

{

id: 2,

text: "Item2",

cells: [{ cid: 1, text: "Item21" }, { cid: 2, text: "Item22" }, { cid: 3, text: "Item23" }],

rows: [

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

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

{

id: 23,

pid: 2,

text: "Item23",

cells: [{ cid: 1, text: "Item231" }, { cid: 2, text: "Item232" }, { cid: 3, text: "Item233" }],

expanded: false,

rows: [

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

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

]

}

]

},

{ id: 3, text: "Item3", cells: [{ cid: 1, text: "Item31" }, { cid: 2, text: "Item32" }, { cid: 3, 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){

var selTimer = $timeout(function(){

supressCallback = true;

 

if (newValue)

$scope.fixedSide = newValue.fixed != undefined ? newValue.fixed : 'none';

 

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

supressCallback = false;

 

$timeout.cancel(selTimer);

}, 1);

}

});

 

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

if (supressCallback)

return;

 

if (newValue != oldValue && $scope.selColumn.fixed != newValue){

$scope.selColumn.fixed = newValue;

$gridService.updateLayout($scope.gridName);

}

});

}]);

.directive

{

border: thin solid #dadada;

width: 600px;

height: 350px;

}

select

{

margin: 5px 0 15px 0;

width: 100px;

}

button

{

width: 100%;

padding: 5px;

}

.fixedVal

{

margin: 0 5px;

}

.iui-treegrid-column-header-left, .iui-treegrid-column-footer-left

{

border-right: 1px solid #808080;

}

.iui-treegrid-column-header-right, .iui-treegrid-column-footer-right

{

border-left: 1px solid #808080;

}

.iui-treegrid-rows-left

{

border-right: 1px solid #808080;

}

.iui-treegrid-rows-right

{

border-left: 1px solid #808080;

}

.iui-treegrid-column-header-left td, .iui-treegrid-column-header-right td

{

background: #969696;

color: white;

border: thin solid #808080;

}

.iui-treegrid-column-footer-left td, .iui-treegrid-column-footer-right td

{

background: #dedede;

}

.iui-treegrid-block-left tr, .iui-treegrid-block-right tr

{

background: #f2f2f2;

}

.iui-treegrid tr.iui-treegrid-row-selected

{

background-color: #428bca;

color: white;

}

.iui-treegrid tr.iui-treegrid-row-hovered

{

background-color: #a6c9e6;

}