Custom grid widgets are mainly created through the use of Cascading Style Sheets (CSS). By assigning a custom CSS class to the widget and by using some built-in classes already provided by the grid, we are able to control the look and feel of the grid in great detail.
The built-in classes of a grid widget include:
- cell – assigned to each grid cell in the body of the grid
- header-cell – assigned to each in the grid heading
- odd – assigned to cells within odd rows
- even – assigned to cell within even rows
- selected – assigned to rows that are selected when the “row selection” property is used
- hover – assigned to rows when the mouse is hovering over them allowing you to specify a hover effect
You will also want to come up with a custom class for the grid. In this example, we will use the class name custom-grid. CSS nesting will allow us to combine the usage of this custom name with the built-in classes already provided by the grid.
To begin, create a new CSS file and place it in directory /www/profoundui/htdocs/profoundui/userdata/custom/css. You can start with the following base CSS and keep tweaking it from there:
/* provide default z index value for the grid */
.custom-grid
/* provide default font and alignment for the cells */
.custom-grid .cell
/* provide default font, background, etc. for the header */
.custom-grid .header-cell
.custom-grid .header-cell div
/* color for for odd, even rows */
.custom-grid .odd
.custom-grid .even
/* protected input fields specified separately */
.custom-grid .odd INPUT.PR
.custom-grid .odd INPUT.PR-UL
.custom-grid .even INPUT.PR
.custom-grid .even INPUT.PR-UL
/* colors for selection and hover effects */
.custom-grid .selected
.custom-grid .hover
Finally, build the custom widget and place it in the designer’s toolbox by creating a JavaScript file and placing it in directory /www/profoundui/htdocs/profoundui/userdata/custom/widgets.
pui.toolbox.add(
);
Note the default “css class” property is what will make the grid appear according to our style sheet rules.