Pages

Friday, February 18, 2011

How to set a custom style name in Google Table visualization

          I was needed to show hand Icon on each cell of my Table viz. Thats why I was required to set style name for each cell. The Table viz provide a nice and easier way to do this. For JS code you can go to the Documentation.
           
          If you are using GWT then you have to work with the table options. Sample code is as follows

              Options.CssClassNames cssClassNames = Options.createArray().cast();
              cssClassNames.setTableCell("mouseoverhand");
              options.setCssClassNames(cssClassNames);

          mouseoverhand is my CSS name here.

The CSS is also simple

.mouseoverhand
{
    cursor:pointer;
    cursor:hand;
    border:1px solid #EEEEEE;
    padding:2px 3px;
}

The first two lines for showing the hand icon
The second two lines is from the basic Table Viz CSS.


No comments:

Post a Comment