Creating a custom grid widget

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:

/* provide default z index value for the grid */ .custom-grid { z-index: 9; } /* provide default font and alignment for the cells */ .custom-grid .cell { font-family: Consolas, monospace; font-size: 14px; text-align: center; } /* provide default font, background, etc. for the header */ .custom-grid .header-cell { font-family: Consolas, monospace; font-size: 14px; color: #1641af; background-color: #cddef3; background-image: url('/profoundui/proddata/images/grids/crystal/header.png'); background-repeat: repeat-x; text-align: center; font-weight: bold; } .custom-grid .header-cell div { text-align: center; } /* color for for odd, even rows */ .custom-grid .odd { color: #555555; background-color: #efefef; } .custom-grid .even { color: #555555; background-color: #fcfcfc; } /* protected input fields specified separately */ .custom-grid .odd INPUT.PR { color: #555555; } .custom-grid .odd INPUT.PR-UL { color: #555555; } .custom-grid .even INPUT.PR { color: #555555; } .custom-grid .even INPUT.PR-UL { color: #555555; } /* colors for selection and hover effects */ .custom-grid .selected { color: #ffffff; background-color: #6699cc; } .custom-grid .hover { color: #555555; background-color: #cbe2ff; background-image: url('/profoundui/proddata/images/grids/crystal/hover.png'); background-repeat: repeat-x; }

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:

pui.toolbox.add({ category: "Custom Widgets", widget: "grid", text: "My Custom Grid", icon: "/profoundui/proddata/images/grids/crystal/icon.png", cls: "widget-node", // A screenshot of the grid is used in the proxy HTML proxyHeight: 182, proxyWidth: 451, proxyHTML: '<img src="/profoundui/proddata/images/grids/crystal/proxy.png" style="height: 189px; width: 453px;">', leaf: true, defaults: { "header height": "26", "css class": "custom-grid" } });

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