Skip to end of metadata
Go to start of metadata

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 cell 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 class names 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 code and keep tweaking it until you achieve the desired look and feel:

Finally, build the custom widget and add it to the designer toolbox by creating a JavaScript file and placing it in directory /www/profoundui/htdocs/profoundui/userdata/custom/widgets.   Add the following JavaScript code to the file:

Please note, the default “css class” property is what will make the grid appear according to our style sheet rules.

  • No labels