LIDOR SYSTEMS

Advanced User Interface Controls and Components

Angular Grid with Rows in Alternate Colors

Created: 20 October 2017

In general, all rows in IntegralUI Grid component for Angular, have the same color style. Depending on current row state, a different color is displayed as its background. In cases when you have many rows, to improve the visual appearance of the Grid and to easily scan through the rows, it is better if even and odd row are displayed in a different color. This article demonstrates that: alternate colors for even/odd rows.

Grid component is part of IntegralUI Web
a suite of UI Components for development of web apps

If you have any questions, don't hesitate to contact us at support@lidorsystems.com

How to Display Grid Rows in Alternate Colors

The appearance of the Grid component is determined by a set of CSS classes. You can modify the attribute of each class on your side, but a better approach is to override the existing CSS classes with your own. For this purpose, you need to use the controlStyle property, which holds a reference to an object that contains the names of all classes for each part of the Grid.

You don't have to add new classes for all parts, you only need to change the ones used by the Grid rows. In this case, under row section, only change the general settings, and apply a different CSS class for each row state: normal, hovered and selected. For example:

public gridStyle: any = {
    general: {
        normal: 'grid-eor-normal'
    },
    row: {
        general: {
            normal: 'grid-eor-row-normal',
            hovered: 'grid-eor-row-hovered',
            selected: 'grid-eor-row-selected'
        }
    }
}
                            
<iui-grid [columns]="columns" [rows]="rows" [controlStyle]="gridStyle" [showFooter]="false" #grid>
    <ng-template let-column [iuiTemplate]="{ type: 'header' }">
        {{column.headerText}}
    </ng-template>
    <ng-template let-cell [iuiTemplate]="{ type: 'cell' }">
        {{cell.text}}
    </ng-template>
</iui-grid>
                            
.grid-eor-normal
{
    width: 800px;
    height: 400px;
}
.grid-eor-row-normal
{
    background: #f5f5f5;
}
.grid-eor-row-normal:nth-of-type(2n)
{
    background: #e1e1e1;
}
                            

Using above code, you have changed the appearance of all grid rows by creating a custom CSS class. Furthermore, to make sure an alternate color is in use based on whether a row order is even or odd, you need to use the CSS selector: nth-of-type(2n). This sets a different color for each row, depending on its order in the list.

When applying custom CSS classes to the grid rows, the default ones are overridden. In this case, the built-in styles applied when a row is hovered or selected are removed. This happens mainly because the CSS selector has higher priority than a class selector. To solve this, just apply a CSS class for hovered and selected state of a row:

public gridStyle: any = {
    general: {
        normal: 'grid-eor-normal'
    },
    row: {
        general: {
            normal: 'grid-eor-row-normal',
            hovered: 'grid-eor-row-hovered',
            selected: 'grid-eor-row-selected'
        }
    }
}
                            
.grid-eor-row-hovered
{
    background: #a6c9e6 !important;
}
.grid-eor-row-selected
{
    color: white;
    background: #428bca !important;
}
                            

As a result, you have a Grid where rows are displayed in alternate colors. In addition, when row is hovered or selected a different style is applied.

Conclusion

Using custom CSS classes and selectors, you can change the appearance of the Angular Grid component. Displaying even/odd rows in alternate colors is very simple, you only need to create a class and apply it to the general row settings under controlStyle. You can add classes for each row state: disabled, normal, hovered and selected.

The Grid component is part of IntegralUI Web.

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.