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: 11 January 2016
Every part of Angular Grid directive is fully customizable. Although there are multiple themes to choose from, in some cases you may need to change the appearance of specific part of the grid, to better suite your application requirements. In this article, you will learn how to customize the grid directive by modifying the built-in CSS classes and create your own custom classes.
In our example, grid directive appears in dark colors. Appearance of each part of the grid is changed, that includes columns, rows, cells, expand icon and scrollbar.
By applying a CSS class to the HTML specification of the Grid directive, we can alter the general appearance. In our case, we are changing the background color to dark color and the text for grid cells to white color.
We are also removing the grid lines, so that grid appears borderless.
/* Grid General */
.iui-treegrid-lines-horizontal, .iui-treegrid-row-cell:first-child, .iui-treegrid-row-cell:last-child
{
border-color: transparent;
}
.grid-dark
{
background: #323232;
color: white;
width: 700px;
height: 450px;
}
.grid-dark > .iui-treegrid-block
{
background: #323232;
}
By default, each column has its header set with different colors depending on the state: normal, hovered or selected. In our example, column header will only show a single line at its bottom border and header text in bold with different color. To accommodate this, most of the colors from existing CSS styles are set to transparent.
/* Grid Column */
.iui-treegrid-column-header-cell, .iui-treegrid-column-footer-cell
{
padding: 10px 2px;
}
.iui-treegrid-column-header
{
background: transparent;
border: thin solid transparent;
padding: 0 5px;
font-weight: bold;
}
.iui-treegrid-column-header > div
{
background: transparent;
border: thin solid transparent;
border-bottom-color: #8ebae1;
}
.iui-treegrid-column-header-hovered, .iui-treegrid-column-header-selected
{
background: transparent !important;
border-color: transparent !important;
}
.iui-treegrid-column-header-selected > div
{
border-bottom-color: white;
color: #3074B1;
}
.iui-treegrid-column-header-hovered > div
{
color: #629ed5;
}
The names of CSS classes are self-explanatory. Each column header cell contains a div element, we are using this element to display a line in column header that appears shorter than actual column width. As a result columns appear, as there is space between them.
There is not much to change for grid rows, except to make their background transparent. So that only hovered or selected cell will display in different color.
/* Grid Row */
.iui-treegrid-row-hovered
{
background-color: transparent;
}
/* Grid Cell */
.iui-treegrid-row-cell
{
padding: 0 5px;
}
.iui-treegrid-row-cell-content
{
padding: 7px 2px;
}
.iui-treegrid-row-cell > div
{
border: thin solid transparent;
}
.iui-treegrid-row-selected
{
background: transparent;
}
.iui-treegrid-row-cell-hovered > div
{
background-color: #3174b0;
}
.cell-selected > div
{
background-color: #629ed5;
}
Similar to column headers, grid cells also have a div element. We need to change the size of this element so that column headers and grid cells appear aligned.
By default, a cell cannot become selected, only row can appear as selected. However, we can change this by handling the cellClick event, so that whenever a cell is clicked we will mark it as selected. In this process, any previously selected cell will be removed.
var currentSelectedCell = null;
$scope.onCellClick = function(e){
if (currentSelectedCell)
currentSelectedCell.style = null;
if (e.cell){
e.cell.style = {
normal: 'cell-selected',
hovered: 'cell-selected'
}
currentSelectedCell = e.cell;
}
$gridService.updateView($scope.gridName);
}
<iui-treegrid name="{{gridName}}" class="grid-dark" columns="columns" rows="rows" allow-focus="false" grid-lines="'none'" show-footer="false" cell-click="onCellClick(e)"></iui-treegrid>
Because this is not possible by changing built-in CSS classes, we can add custom CSS class, which will be applied only to clicked cell. Each cell object has a style field, which accepts names of custom CSS classes, for different state of the cell. In our case, we only need to apply a custom style when cell is hovered or in default state.
We can also replace the built-in icons for expand boxes, and use our own. Only few modifications need to present for corresponding CSS classes. Changes to the resource location and different icon for expanded or collapsed state of the expand box.
/* Grid Expand Box */
.iui-treegrid-expand-box
{
background: url(expand-boxes.png) no-repeat 0 0;
display: inline-block;
margin-right: 2px;
width: 16px;
height: 16px;
vertical-align: middle;
}
.iui-treegrid-expand-box-open
{
background-position: -16px 0;
}
.iui-treegrid-expand-box-close
{
background-position: -32px 0;
}
Finally, scrollbars also need to appear in dark colors. Several CSS classes need to be changed.
/* Grid ScrollBar */
.grid-dark .iui-scrollbar-vertical
{
background-color: #303030;
border-left: thin solid #242424;
}
.grid-dark .iui-scroll-button-thumb-vertical, .grid-dark .iui-scroll-button-thumb-horizontal
{
background-color: #646464;
border: thin solid #484848;
}
.grid-dark .iui-scroll-button-thumb-vertical:hover, .grid-dark .iui-scroll-button-thumb-horizontal:hover
{
background-color: #aaaaaa;
border-color: #808080;
}
.grid-dark .iui-scrollbar-horizontal
{
background-color: #303030;
border-top: thin solid #242424;
}
.grid-dark .iui-scrollbar-corner
{
background-color: #303030;
}
Note Because the scrollbar can appear in other IntegralUI components, we are using the specified class as selector. In our example, the name of that class is 'grid-dark'.
By modifying values of built-in CSS classes and creating new custom classes, we have managed to change the appearance of Angular Grid Directive. The grid behavior remains the same, but as you can see from above demo, the grid looks very different.