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.