Customizing the Grid Appearance

You can customize the grid's appearance based on its data by handling the rowRendered, customDrawCell and customDrawHeader events. The rowRendered event is raised after
a row's DOM is added to the page.

The getRowElement and getCellElement methods of the grid can be used to access DOM elements within the grid structure and style them based on the row data content, provided in the event arguments.

The customDrawCell event is raised when the cell's contents are rendered, and allows you to replace the default content with a custom DOM structure, like adding wrapper div elements, images, etc. The customDrawHeader event provides the same functionality for the grid column headers.

JavaScript

// if the value in the 'winnings' field is more than 3000, paint the row red
grid.rowRendered.addEventListener(function (sender, args)
{
    if (args.rowData["winnings"] > 3000)
        sender.getRowElement(args.row).style.backgroundColor = "red";
})

The grid control can be styled by CSS, as an addition to or instead of using one of the predefined CSS themes, that come with the package.