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.



dojo.require("dojox.data.HtmlStore");
dojo.require("dojox.grid.EnhancedGrid");
dojo.require('dojo.parser');
dojo.ready(function(){
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,
formatter:isbnformatter
},
{
field: "author",
name: "Author",
width: 10

},
{
field: "title",
name: "Title",
width: 'auto'
}]];

var store = new dojox.data.HtmlStore({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*/
dojo.byId("gridDiv").appendChild(grid.domNode);

/*Call startup() to render the grid*/
grid.startup();
});

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: