Grid rows

This guide covers grid rows functions. They allow you to define how rows should be structured, including horizontal grid, vertical grid and row coloring. The rows can be colored in three different schemes: even, odd or no coloring at all. It is simple and easy just use one of the inputs in the <gui-grid> selector. Row coloring can be specified as a string ('odd') or an enum (GuiRowColoring.ODD). See the 'Grid rows' tab below.

On the example below you can check following functions:

  • Horizontal grid,
  • Vertical grid,
  • Row coloring: None, Odd, Even.
Rows example
app.component.ts
users.ts
Name
Position
Team
Training
Company
Mark Ross Team Leader TI 13 Genco Pura Olive Oil Company Concepción King Carpenter KN 33 Globex Corporation Vanecia Green Painter CR 42 Soylent Corp Samara Anderson Electrician PU 100 Initech Maxine Hamilton SEO Manager KN 29 Gekko & Co Dan Lee Director TI 92 Sterling Cooper Paul Long Web Developer AN 13 Hooli Madonna Snyder Product Manager DR 81 Vehement Capital Partners Oriole Perkins Public Relations TI 72 Massive Dynamic Ernest Jordan Copywriter TI 55 Wonka Industries
@Component({
	template: `
		<gui-grid [source]="users"
				  [columns]="columns"
				  [horizontalGrid]="horizontalGrid"
				  [verticalGrid]="verticalGrid"
				  [rowColoring]="rowColoring">
		</gui-grid>
	`
})
export class RowComponent {

	users = users;

	columns = [{
        header: 'Name',
        field: 'name'
    }, {
        header: 'Position',
        field: 'position'
    }, {
        header: 'Team',
        field: 'teamShort',
        width: 80
    }, {
        header: 'Training',
        field: 'training',
        type: GuiDataType.NUMBER,
        width: 100
    }, {
        header: 'Company',
        field: 'company'
    }];

	horizontalGrid: boolean = true;
	
	verticalGrid: boolean = true;
	
	rowColoring: GuiRowColoring = GuiRowColoring.NONE;
	
	


}
[
    {
        "name": "Mark Ross",
        "company": "Genco Pura Olive Oil Company",
        "position": "Team Leader",
        "teamSort": "TI",
        "training": 13,
        "budget": -7000
    }, ...
]

Row - Inputs

InputTypeDefaultDescription
horizontalGridbooleantrue Enables horizontal lines that separate rows within the grid.
verticalGridbooleantrue Enables vertical lines that separate columns within the grid.
rowColoringstring | GuiRowColoringGuiRowColoring.EVENApplies colored shading to the grid rows. Available shading options: even, odd, none.

Related articles:

We use cookies to improve your experience. If you continue browsing, we assume that you consent to our use of cookies.