Custom Angular Grid Appearance

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.

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

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.

Change General Grid Styles

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.

Custom Column Headers

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.

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.

Change Rows and Cells

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.

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.

Handle Click Event to Alter to Customize the Cell Appearance

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.

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.

Replace Expand Icon

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.

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

Conclusion

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.

Tab content switching

Newsletter

Sign-up to our newsletter and you will receive news on upcoming events, latest articles, samples and special offers.

Name:

Email: *

*By checking this box, I agree to receive a newsletter from Lidor Systems in accordance with the Privacy Policy. I understand that I can unsubscribe from these communications at any time by clicking on the unsubscribe link in all emails.