Dynamically building a Grid

[akdeiva]

Dear Jack,

I have been watching your blog for the past one month and its really impressive to see the kind of things you do :)

Currently i am using your Grid control and i face certain issue, and i am not sure whether its an issue or whether it can't be done that way. So it would be great if you can help me out on this.

I am trying to have two grids in a page, where, both the grid details needs to be dynamically populated (both the headers as well as the data within the grid whih i populate). Currently i tried to do it and i am facing the problem in gettin gthe data populated. First time, it opens up correctly and listed out the details, and then when i click a button, it has to rebuild the grid with the todally different data. In this case, i was able to get the header changed, but the data is not populating correctly.

It either shows the old data, and incase if i tried to removeAll method of the grid, dataModel, then it clears out the data and it couldn't build out the data.

So can you help me out in this, in explaining on what needs to be done to get it fixed. I am trying to initialize the grid with the grid.Init() method while i click the button. So when i tried to debug out, it comes thru out till the grid data get populated.

Expecting yout timely help !!!

[akdeiva]

Hi,

Herewith i am attaching the code, which might be helpful in understanding what i am expecting for:

var Forum = function(){

// The forum list updates every 60 seconds looking for new messages
// it gets the counts as JSON and applies them to the list
var onSelection = function(){
topicId = grid.getSelectedRowId();

};


return {
init : function(){

if(varCol == 0) {
var myColumns = [
{header: "", width: 130},
{header: "Topic", width: 330},
{header: "Author", width: 100},
{header: "Posts", width: 40},
{header: "Last Post", width: 150},
{header: "Last User", width: 120}
];

var schema = {
tagName: 'Topic',
totalTag: 'TotalCount',
id: 'id',
fields: ['html', 'title', 'author', 'totalPosts', 'StartsWith', 'EndsWith']
};
} else if(varCol == 1){
var myColumns = [
{header: "", width: 130},
{header: "Topic", width: 330},
{header: "Last Post", width: 150},
{header: "Last User", width: 120}
];

var schema = {
tagName: 'Topic',
totalTag: 'TotalCount',
id: 'id',
fields: ['html', 'title', 'StartsWith', 'EndsWith']
};

} else if(varCol == 3){
var myColumns = [
{header: "", width: 130},
{header: "Hi", width: 330},
];

var schema = {
tagName: 'Topic',
totalTag: 'TotalCount',
id: 'id',
fields: ['html', 'title']
};

varCol = 0;
} else if(varCol == 2){
var myColumns = [
{header: "", width: 130},
{header: "Topic", width: 330},
{header: "Author", width: 100},
{header: "Posts", width: 40},
{header: "Last Post", width: 150},
{header: "Last User", width: 120}
];

var schema = {
tagName: 'Topic',
totalTag: 'TotalCount',
id: 'id',
fields: ['html', 'title', 'author', 'totalPosts', 'StartsWith', 'EndsWith']
};
}

this.dataModel = new YAHOO.ext.grid.XMLDataModel(schema);
this.dataModel.baseParams = baseParams;
this.dataModel.initPaging('./topics.php', 10);

this.colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);
this.colModel.defaultSortable = true;

this.grid = new YAHOO.ext.grid.EditorGrid('topics-grid', this.dataModel, this.colModel);
this.grid.render();

// the grid is ready, load page 1 of topics
this.dataModel.loadPage(1);
}

}
}();

var oElement = document.getElementById("cmdApply");
function fnCallback(e) {
baseParams={'mode': varCol};
if(grid)
grid.clearSelection();
Forum.init(Forum);
varCol++;
}
YAHOO.util.Event.addListener(oElement, "click", fnCallback);

With the above code, i am able to get the column header get changed dynamically, and even when i debug it, i can find that the response from the serverside is fine and the Data model get the XML data properly get updated. But somehow, in the display part, it retains the old data itself and couldn't show the new XML which is received from server.

Where could be the problem lies and what needs to be done to get it fixed... :?

[jack.slocum]

I'm not sure what you are trying to do. Are you trying to hot swap the structure of the grid? If yes, that's unfortunately not supported (although theoretically it can be done with a bit of work).

If all you are trying to do is render the grid and you are running into problems, can you put up a link?

[akdeiva]

I'm not sure what you are trying to do. Are you trying to hot swap the structure of the grid? If yes, that's unfortunately not supported (although theoretically it can be done with a bit of work).


Yes, you are right. I am trying to hotswap the grid. Ok, if it can't be done with the current architecture, then can you guide me on which part i have to look on to get it work, as you suggested it can be done with a bit of work.

[jack.slocum]

You will need to do something like this:

- Wipe out all the grid's child nodes - maybe something like:

grid.container.update('');

- purge listeners on the column model (requires latest code)

colModel.purgeListeners()

- unplug the data model

grid.getView().unplugDataModel(dm);

- update the column model config

cm.config = (your new config);

- call render() on the view again (not the grid)

grid.getView().render();

Obviously you will need your new data as well - you will probably want to load it last so you don't double render it.

The above may not even work, it is hypothetical. :shock:

[akdeiva]

Ok, the thing which you suggested is working now, but facing problem when i use,

colModel.purgeListeners()

It throws error and says that there is no such function.

As far as the cm.config is concerned, i am re-generating the column model for each grid/dataset and i guess there shouldn't be any problem doing that way.

I am havign the latest code base, the one .33 rc1 beta, and still i have that purgelisteners error.

[jack.slocum]

The latest code I was referring to was from svn:

http://code.google.com/p/yui-ext

Or you can wait a day for the rc2 release.