Dynamic Grid Problems

[mikegiddens]

I am not sure if it is me or a bug but I would imagine it is me.

My main issue is a sub grid is being created from a call:


selModel.onRowSelect.subscribe(this.showSchoolInfo, this, true);


and in that function I call a function to create a new grid in a div that was dynamically created in the showSchoolInfo function. Everything seems to work but there is a major side effect with the col listener. For some reason the inital grid is linked to the sub grid col widths. I have set up different DefaultColumnModel for the different grids.

Example Posted here:
http://www.michaelgiddens.com/project/schools.html

Code Used:



var Organization = {
init : function(schoolID) {
var schema2 = {
tagName: 'Item',
id: 'OrganizationID',
fields: ['School', 'State', 'City']
};
dataModel2 = new YAHOO.ext.grid.XMLDataModel(schema2);

var colModel2 = new YAHOO.ext.grid.DefaultColumnModel([
{header: "Organization", width: 100, sortable: true},
{header: "Symbols", width: 50, sortable: false},
{header: "Type", width: 50, sortable: true}
]);

// create the Grid
grid2 = new YAHOO.ext.grid.Grid('org-grid', dataModel2, colModel2);
grid2.autoWidth = true;
grid2.autoHeight = true;
grid2.render();
var file = "school-" + schoolID + ".xml";
dataModel2.load(file);
}
}

var Schools = {
init : function(){
body = new YAHOO.ext.Actor('school-info');

var schema = {
tagName: 'Item',
id: 'SchoolID',
fields: ['School', 'State', 'City']
};
dataModel = new YAHOO.ext.grid.XMLDataModel(schema);

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var colModel = new YAHOO.ext.grid.DefaultColumnModel([
{header: "School", width: 220, sortable: true},
{header: "State", width: 150, sortable: true},
{header: "City", width: 115, sortable: true}
]);

// create the Grid
selModel = new YAHOO.ext.grid.SingleSelectionModel();
selModel.onRowSelect.subscribe(this.showSchoolInfo, this, true);

grid = new YAHOO.ext.grid.Grid('school-grid', dataModel, colModel, selModel);
grid.autoWidth = true;
grid.autoHeight = true;
grid.render();

dataModel.load('schools.xml');
},

showSchoolInfo : function(selModel, row, selected){

if(selected){
var dm = dataModel;
var node = dm.getNode(row.rowIndex);
var link = dm.getNamedValue(node, 'DetailPageURL');
var schoolID = dm.getNamedValue(node, 'SchoolID');
var school = dm.getNamedValue(node, 'School');
var state = dm.getNamedValue(node, 'State');
var city = dm.getNamedValue(node, 'City');

html = "School: " + school;
html += "
State: " + state;
html += "
City: " + city;
html += "

<div></div>"
html += "

School Profile ('" + link + "')"

body.startCapture(true);
// body.hide(true, .1);
body.update(html);
body.show(true, .2);
body.play();

///////////////////////
// Call to Create Nested Table
///////////////////////
Organization.init(schoolID);
//////////////////////////////
}

}
}

YAHOO.ext.EventManager.onDocumentReady(Schools.init, Schools, true);


Any insite on why this happens or if this could be a bug?

Question 2:

selModel.onRowSelect.subscribe(this.showSchoolInfo, this, true);


It seems this also listens for a click on the title bar as well and was wondering if there was anyway to know the difference when the title bar is clicked and an actual row?

Cheers

[tryanDLS]

You might try downloading the RC2 codebase - there may have been some fixes that solve your problem. If not, post back and if nobody else sees anything obvious, I can try and pull it down locally and test.

I didn't look thru all the CSS, do you have the ygrid-col CSS entries for each grid? Seach for 'multiple grids' if not.

EDIT - I pulled your code down locally - it seems to work with RC2

[mikegiddens]

Once I found the "Multible Grid" topic I followed the procedure and that fixed my problem. Its funny how the problem is related witht the style sheet but the good news is there are smarter people in the world then me.

Here was the tip so people don't have to keep searching.

Keep up the good work.


:)

Open the grid.css and you would see a number of definitions like


.ygrid-col-0{
}
.ygrid-col-N{
}

Make these specific to your grids for as many cols you have for each different grid on your page


#gridid1 .ygrid-col-0{
}
#gridid2 .ygrid-col-0{
}
so on for the no of cols you have

I hope this would solve the problem[/i][/code]

I would also suggest the everyone should read the css files because there are some useful commenting that would should have been read.

Thanks Again!!!