Sunday, January 1, 2012

How can you get data highlighted in a Enhanced Data grid : dojo

Say we have a requirement to highlight the data in enhanced datagrid of dojo according to some rules. For example suppose you are building a portfolio management service and you want to highlight all the shares in portfolio that has given negative returns. How can you do that in an enhanced datagrid of dojo. I had the similar requirement.
First of all why would you need an enhanced datagrid at all.
The enhanced datagrid of dojo comes with a lot of features which is not available to the simple table of html. Some of the important features include
1) Out of box support for the sorting of data in a column.
2) Drag and drop facility
3) The support to the various event handlers like onmouseover, onstyleshow etc which gives a lot of flexibilities to provide the data.

function isbnformatter(indexdata,row, cell){
var item = grid.getItem(row);
var type = store.getValue(item, "isbn", null);
if(type == 1 || type ==5){
cell.customStyles.push( "color:red;font-weight: bold;");
return type;

var layoutBooks = [[{
field: "isbn",
name: "ISBN",
width: 10,
field: "author",
name: "Author",
width: 10

field: "title",
name: "Title",
width: 'auto'

var store = new{url:'mytable.html',dataId:'books2'});
var obj = {
id: 'grid',
store: store,
structure: layoutBooks,
rowSelector: '20px'};

var grid = new dojox.grid.EnhancedGrid(obj,document.createElement('div'));

/*append the new grid to the div*/

/*Call startup() to render the grid*/

create a div with the name gridDiv to provide a placeholder for the grid.

For url:'mytable.html'you will have to create a html file which will give the data to that HTML store. dataId:'books2' is the id of the table that we have created for the data.

No comments: