Grid using ver .32

[techno_adi]

Hi,
Questions
Error in yui-ext.js : this.events[eventName.toLowerCase] has no property
is this a bug?

can this be regarded as a basic example for the grid v.32? (if it works) :)

My HTML Page
For some reason it's not showing up properly. Assume that i have included yahoo.js,dom.js,event.js,dragdrop.js, yui-ext.js(v.32),
grid.css and grid-example.js as below.

Inside Body tag
div id="grid-example" style="width:630px;height:250px;overflow:hidden;position:relative;"



my grid-example.js file

var Example = {
init : function(){
// some data yanked off the web
var myData = [
['Lm Co','1/31/2000','5/31/2000','100000','10.10','15.30',''],
['Alcoa Inc','2/25/2001','9/30/2001','500000','15.00','20.00',''],
['Altria Group Inc','2/31/2001','4/25/2001','150000','12.00','16.00',''],
['American Express Company','1/31/2000','31/5/2000','100000','10.10','15.30',''],
['American International Group, Inc.','3/30/2002','12/31/2002','700000','19.00','25.00',''],
['Boeing Co.','6/26/2003','5/26/2004','5000000','20.00','30.00',''],
['Caterpillar Inc.','8/30/2003','9/30/2003','50000','09.00','13.50',''],
['Citigroup, Inc.','7/22/2004','9/22/2004','90000','11.10','17.30',''],
['E.I. du Pont de Nemours and Company','9/25/2005','10/25/2005','200000','30.83','45.10',''],
['Exxon Mobil Corp','5/1/2005','5/31/2005','20000','05.00','09.63',''],
['Honeywell Intl Inc','8/15/2005','12/15/2005','800000','18.00','22.25',''],
['International Business Machines','11/1/2005','11/31/2005','80000','40.00','49.99',''],
['JP Morgan & Chase & Co','1/1/2006','1/31/2006','100000','10.13','18.30',''],
['Merck & Co., Inc.','2/1/2006','3/31/2006','300000','09.15','15.85',''],
['The Home Depot, Inc.','4/14/2006','7/15/2006','600000','20.81','25.83',''],
['The Procter & Gamble Company','8/1/2006','9/15/2006','90000','30.10','45.30',''],
['United Technologies Corporation','9/30/2006','12/31/2006','185360','12.34','23.45','']
];
var dataModel = new YAHOO.ext.grid.DefaultDataModel(myData);
// example of custom renderer function
function italic(value){
return '' + value + '';
}

// example of custom renderer function
function change(val, suffix){
suffix = suffix || '';
if(val >= 20){
return '<span>' + val + suffix + '</span>';
}else if(val </span> 20){
return '../profit.gif';
}
else{
// get the value at row 1, column 1
return '../warning.gif';
}
}

// sortTypes provide support for custom sorting comparison functions
// not needed for this table but here for demonstration
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var myColumns = [
{header: "Project", width: 200, sortable: true, sortType: sort.asUCString},
{header: "Start Date", width: 75, sortable: true, renderer: italic},
{header: "End Date", width: 75, sortable: true, renderer: italic},
{header: "Revenue", width: 85, sortable: true, renderer:money},
{header: "Profit % on Revenue", width: 110, sortable: true, renderer: pctChange},
{header: "Profit % on Cost", width: 90, sortable: true, renderer: pctChange},
{header: "Profitable?", width: 70, renderer: renderImage}

];
var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);

//selection model added in ver .32
var selModel = new YAHOO.ext.grid.SingleSelectionModel();

//dm.setDefaultSort(cm, 3, 'DESC');
// select the first row in the grid every time a new datset is loaded
dataModel.addListener('load', selModel.selectFirstRow, selModel, true);



// create the Grid
this.grid = new YAHOO.ext.grid.Grid('grid-example', dataModel, colModel, selModel);
//var start = new Date().getTime();
this.grid.render();
//var end = new Date().getTime();
//alert('Rendered in ' + ((end-start)/1000) + ' seconds');
//ver .31
//this.grid.getSelectionModel().selectFirstRow();
}
}
YAHOO.util.Event.on(window, 'load', Example.init, Example, true);
[/quote]

[jack.slocum]

Hi,

DefaultDataModel doesn't provide loading, it works with basic JS arrays (like in your code). LoadableDataModel extends DefaultDataModel to add remote loading and it defines the load, beforeload and loadexception events.

This line:
dataModel.addListener('load', selModel.selectFirstRow, selModel, true);

is trying to listen for a load event, which is undefined on DefaultDataModel.

To to select the firstRow "after load" in a non loading model, you can call selModel.selectFirstRow right after calling render().
this.grid.render();
selModel.selectFirstRow();


Jack

[techno_adi]

Thanks, Now I know my mistake.
btw.. the grid doesn't have any border..where can i set that

[jack.slocum]

Set a border on your container in your CSS file.

#your-grid-container-id{
border:1px solid #dddddd;
}

[techno_adi]

Set a border on your container in your CSS file.

#your-grid-container-id{
border:1px solid #dddddd;
}


what i meant was..in the grid.css file, havent you provided this support?
and how do i do when i need to set it for different styles..
i.e. ygrid-mso , -vista etc..

Please, forgive me.. But i am new to this

[jack.slocum]

Because many implementations would not want a border, I don't put a border on the grid by default. You are welcome to modify the grid.css file and add borders to the rules for each of those styles if you want. I try to do as much as possible in CSS so it's easy to modify.

[techno_adi]

Ok.. one weird problem has occured

when i am showing up my page( with the changes you have mentioned in the above grid-example.js). it gives me error(in IE6) at line 2 char 2622 as Invalid argument.
Now this error is removed when i put a alert box just b4 rendering statement i.e. grid.render();

do you have any idea why this must be occuring?

[rodiniz]

I am trying to implement the grid using .32 but I am getting a strange error
on the line
var box=this.grid.container.getBox(true)
it says that getBox is null.
My javascript code is almost identical to the one on Forum.js , just changing the column names..

[jack.slocum]

Are you using yui-ext.js or are you referencing the scripts individually? getBox is a newer method on YAHOO.ext.Element (this release). Make sure you aren't referencing an older version directly.

Your container cannot have display:none set or be in another element with display:none, else it can't be measured and getBox will fail. The solution is to use visibility:hidden instead of display:none. This is good practice anyway as display:none->display:block is slower than visibility:hidden->visibility:visible.

Jack

[techno_adi]

Hi,
While resizing the browser, the header of the grid doesn't seem to refresh, some part of the header turns white as opposed to the ygrid-mso header background that i have. How can i fix this?

[jack.slocum]

I don't know. I've never experienced that. If you could put up a page where I can see it I will take a look.

Jack

[techno_adi]

Got that,
Actually i had put the grid into table and grid width was set as relative percentage. Now when i was resizing my browser, the scroll-bars(for the grid) used to appear and again resizing it caused the problem
below is the only code

table-tag width=100%
tr
td

div id="grid-example" class='ygrid-mso' style="width:70%;height:380px;overflow:hidden;position:relative;"
div-close
td-close
tr-close
table-close

giving a fixed width for the div (say 400px) fixed the problem for me.