Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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:

Code Block
css
css

/* 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

...

place

...

it

...

in

...

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:

Code Block
javascript
javascript
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,
 &nbsp; proxyHTML: '<img src="/profoundui/proddata/images/grids/crystal/proxy.png" style="height: 189px; width: 453px;">',\\

 &nbsp; leaf: true,&nbsp;
 &nbsp; defaults: {
 &nbsp;&nbsp;&nbsp;   "header height": "26",
 &nbsp;&nbsp;&nbsp;   "css class": "custom-grid"
 &nbsp; }&nbsp;

});\\

Note the default “css class” property is what will make the grid appear according to our style sheet 

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