| Note | ||
|---|---|---|
| ||
As of July 25th, 2023, there is a content freeze on this page. |
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.
...
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:
| Code Block | ||||
|---|---|---|---|---|
| ||||
/* 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;
}
|
...
| Code Block | ||||
|---|---|---|---|---|
| ||||
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"
}
});
|
...