LIDOR SYSTEMS

Advanced User Interface Controls and Components

Angular Grid Columns Fixed on Left or Right Side

Created: 19 November 2015

In general, columns in IntegralUI Grid for AngularJS are not fixed, and they remain scrollable. This directive comes with built-in feature that allows you to pin specific column to either left or right side. This can be done manually from code, or dynamically during run-time using a dropdown column menu for example.

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

Fixed on Side:


In our demo, each column can be fixed on left or right side using the control panel settings. By selecting a specific column, you can change the side on which it will be fixed, or return it back to scrollable mode.

How to Set Grid Column to Appear as Fixed on Left or Right Side

Column object has a fixed field which determines whether and on which side column is fixed. This field can accept one of these values:

  • 'none' - stating that column is not fixed and will remain scrollable
  • 'left' - stating that column is pinned on the left side
  • 'right' - stating that column is pinned on the right side

By default, this field value is set to 'none'. By simply changing this value to 'left', you can make column to appear frozen on the left side. If you have more than one column fixed on the left side, they will appear in order, as they are present in the columns data set. In similar way, columns can appear frozen on the right side.

// Column settings where some columns are fixed on left or right side

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

];

When columns are fixed, they are excluded from horizontal scrolling. The scrolling will take place for all remaining non-fixed columns.

Note You may also have all columns fixed.

Although columns can be fixed, they remain resizable. By moving the mouse cursor over the end column header, you can resize a fixed column in the same way as for normal columns. One exception is for fixed columns on right side, in this case the resizing functionality is reversed: left end of column header will increase the column width, while the right end will decrease it.

Related: Columns with Fixed Width

In our example, whenever a column is selected from combo box in control panel, and its fixed state is changed, the grid layout is updated.

// A unique identifer for the grid

$scope.gridName = "gridSample";

// By default columns are not fixed on any side

$scope.fixedSide = 'none';

// A variable that holds a reference to the currently selected column

$scope.selColumn = null;

 

// A variable used to suppress any callbacks when column is selected

var supressCallback = false;

 

// Handler for afterSelect event

$scope.onAfterSelect = function(e){

if (supressCallback)

return;

 

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

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

$scope.$apply();

}

}

 

// Watch for any changes of selColumn variable and update values of controls in control panel

$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);

}

});

 

// Watch for any changes in fixedSide variable and apply the change to the column fixed field

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

if (supressCallback)

return;

 

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

$scope.selColumn.fixed = newValue;

$gridService.updateLayout($scope.gridName);

}

});

<iui-treegrid name="{{gridName}}" columns="columns" rows="rows" after-select="onAfterSelect(e)" show-footer="false"></iui-treegrid>

Changing Appearance of Fixed Columns

To distinguish a fixed column from a normal one, we are overriding the default CSS styles with custom ones. In this way, it is more presentable to the user that some columns are fixed.

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

}

You can also create your own CSS classes and apply them to specific columns, in code. Each column has a style object, which accepts class names for different column parts.

Conclusion

Fixing a column on left or right side in Angular Grid directive is straightforward. You only need to change the fixed field value of specific column object, and the column can appear as fixed in the grid.

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.