Lets go step by step:
- You have to do this in data table.
- create the data table
- DataTable dt = DataTable.create();
dt.addColumn(ColumnType.STRING, "Person");
dt.addColumn(ColumnType.NUMBER, "Salary"); - Add few rows
- dt.addRows(5);
dt.setValue(0, 0, "Iftee");
dt.setValue(0, 1, 123);
dt.setValue(1, 0, "Ove");
dt.setValue(1, 1, 321); Look we have used the setvalue(...) here. But there is another function to that is setcell(....) which takes another two extra parameters. - dt.setCell(2, 0, "test", "Hello test", getCellProp());
dt.setCell(2, 1, 100, "$100", getCellProp()); - "Hello test" and "$100" is the formatted value of the for table. that means your underlying data table will contain "test" but the table will show "Hello test". Same for 100 and $100
- It take the last parameter a Properties object, which in fact a JavaScriptObject(JSO). So you cant create it on JAVA. You have to make a JSNI (Javascript Native Interface) function to get the JSO.
- Signature of the function is like public native Properties getCellProp();
- The JavaScript implementation of this table visualization help me a lot to write the body of this JSNI function. it is like
- /*-{
var cssClassNames = {'className': 'bigAndBoldClass'};
return cssClassNames;
}-*/; which is pure javascript. Here className is the property name and bigAndBoldClass is the property valu - Now you will need to add a CSS to your GWT project write a class named bigAndBoldClas. ANd then include the CSS in the module
No comments:
Post a Comment