Dynamic columns based on JSON being fed
Eddie Shipman
Steve Fazekas
Steve Fazekas
--
You received this message because you are subscribed to the Google Groups "SlickGrid" group.
To unsubscribe from this group and stop receiving emails from it, send an email to slickgrid+...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
Eddie Shipman
bill...@gmail.com
Hi Eddie!
I do what you’re doing all the time, to display things like arbitrary Database Query results; I never know the names or number of columns to be displayed until the results are returned to my JavaScript.
However…the JSON response format that you’re using is not very efficient for this kind of thing.
Are you stuck with (or married to) that JSON response format?
If not, and you have control over the format of the response that the server hands you, I can show you a MUCH better way to handle this. It’s far more efficient for the server to generate, far more efficient to transmit over the network, and far more efficient to stuff into a SlickGrid. I routinely display result sets with a hundred thousand rows or more, and they work perfectly and very quickly.
Bill Rebey
--
bill...@gmail.com
Ha! That’s exactly what I do, and what I was going to tell you to do! ;-) If you want a quick jump-start, here’s a couple snippets that demonstrate how I do it (these aren’t complete examples; these are snippets from a larger body of code; I think everything you need to get up and running is here, though):
The data arrives in a JSON object something like this:
{
"ColumnHeadings": ["MsgID", "LastName", "FirstName"],
"RowData": [ ["1", "Smith", "Bob"],
["2", "Jones", "Sally"] ]
}
All that’s needed to get the data on-screen is:
var gridQMsgs;
var gridQMsgsColumns = [];
var gridQMsgsOptions = {...whatever...};
var gridQMsgsDataView = new Slick.Data.DataView(); ;
var gridQMsgsData = [];
// This tracks index in the data array that's associated with each column
// It’ll be used to populate the “field:xxx” field for each column definition
var iCnt = 0;
//push all the column definitions.
jQuery.each(jsonResp.ColumnHeadings, function () {
var colSpec = { id: this, name: this, field: iCnt, sortable: true};
gridQMsgsColumns.push(colSpec)
iCnt += 1; // Next column index
return (true); // returning false halts iteration
});
//Create the SlickGrid in the specified Div
gridQMsgs = new Slick.Grid("#DivToHoldGrid", gridQMsgsDataView, gridQMsgsColumns, gridQMsgsOptions);
// Create reference to data for convenience
gridQMsgsData = jsonResp["RowData"];
// Get the data on-screen/populate the DataView
gridQMsgsDataView.setItems(gridQMsgsData, 0);