Login Register

Grid with multiple data sources?

I'm trying to populate grid data from two different sources. Source A contains all my base data (incl. ID, etc.). Source B contains some metadata about data from source A. I have the grid showing the data from source A just fine. I then go out and grab the metadata from source B and... I can't figure out how to make the grid show the additional data. I have a column defined in my view for the metadata. Once the metadata comes back from the server, I set the appropriate values in grid.model.store._data (I know it's private, but I'm finding it very clunky to work with dojo's data sources as their cute examples aren't much help when trying to do something a little more sophisticated).
Shouldn't I be able to do this:

var rowsOfData = dojoXGrid.model.store._data;
for(var i = 0; i < rowsOfData.length; i++){
var theID = rowsOfData[i].ID;
rowsOfData[i].average = ratingsMap[theID];
}

dojoXGrid.setModel(dojoData);
dojoXGrid.refresh();
dojoXGrid.update();

Assume the ratingsMap is populated correctly and everything is defined... that's not the problem here.
I've stepped through it and the data in the back has the metadata (in this case the 'average' field). Surely I'm making this too hard? Or was the grid never meant to do these types of (seemingly) common things?

The problem is probably setting _data directly

... if you do that, I think the store API does not know about the new column. What sort of datastore are you using anyway?

Two things you can try:
i) Have source A return a null (or dummy) value for "average", so that the column already exists when you set it from source B.
or:
ii) Switch to using a dojox.grid.data.Table or dojox.grid.data.Objects based model. You would have to write your own xhr methods to fetch the data from the server, but then you can manipulate the data to combine the sources before you create the model.

Well option I is not doable,

Well option I is not doable, as my source is out of my control AND cross domain (yikes)... option II is how I've gotten it working since... Is there no way to select a 'row' and then update that column? I'd like a nice and smooth populating of the data I receive from source B.

Thanks very much for the help, btw.

One more thing...

I've defined my structure to include the column that I'll eventually get from source B... so the grid is 'expecting' it if you will... seems like I should just be able to grab that column in the model and go to town?

Depends on what you want to achieve

Sorry for the rather delayed response - don't get as much time for this as I would like. Not sure exactly what you are asking - do you fetch all the data from source B for the additional column in on call, or is it one call per line in A, but you still want to fetch it all, or do you only want to fetch as lines are selected by the user? (However, you are correct that you should probably define your structure to include the extra column whatever approach you take for the model.)

If you are always going to fetch it all in one call, you are best to mix it into your data from source A before you even create the model, let alone attach it to the grid.

If it is one call per line, how you handle it would depend firstly on whether you still want all the data, or only for selected lines, and secondly on the response time of source B.

If it is only for selected lines, you would probably want to respond to the onRowClick or onRowMouseOver events (as discussed in the Book of Dojo's section on Grid events, and in the handler, fetch the data for the row from source B and call model.setDatum() - this should re-render just that row with the additional column's data populated (I haven't tried using setDatum(), so I not sure how well it works).

If you want to populate all the rows, but must call source B one row at a time, it will depend on your source's response time. If it is very quick, you will probably still do better to try merging with the data from source A before you create the model. If it is a little slower, you will probably do better to display the grid without the additional column data, then iterate over the rows getting data from source B and using setDatum to add it to the model. You would obviously have to be careful about timing and about blocking the user, and you would probably get some flicker as each line is re-rendered.