Reputation: 841
I am trying to create a dynamic grid in dojo. Basically, I have a select form and a grid and when I choose a select option, I want the grid to load a different dataset.
Code:
contentPane = new ContentPane({
title: "Group 1",
});
//Create grid
function genGrid(dataframe){
alert(dataframe);
myStore = Cache(JsonRest({target:"/data/"+dataframe}), Memory());
return grid = new DataGrid({
store: dataStore = ObjectStore({objectStore: myStore}),
structure:[{"field": "division", "name": "division", "width": "200px"}, {"field": "country", "name": "country", "width": "200px"}, {"field": "sales", "name": "sales", "width": "200px"}, {"field": "cost", "name": "cost", "width": "200px"}]},
"target-node-id").placeAt(contentPane.containerNode);};
sel = new Select({
name: 'select2',
onChange: function(select){alert(select);
genGrid(select)},
options: [
{ label: 'TN', value: 'Tennessee' },
{ label: 'VA', value: 'Virginia', selected: true },
{ label: 'WA', value: 'Washington' },
{ label: 'FL', value: 'Florida' },
{ label: 'CA', value: 'csvtable' }]
}).placeAt(contentPane.containerNode);
contentTabs.addChild(contentPane);
However, this code does not work. If I call genGrid(dataframe) outside the sel onChange attribute, the grid appears, but then it does not change when I choose the options in the select.
I suspect the problem here is how I am appending the grid and the select to the contentpane, but I could not find better ways to do this.
Upvotes: 0
Views: 669
Reputation: 3821
1) dojo widgets need a DOM node as a placeholder for the widget. Is your "target-node-id" an actual DOM element with that id? If not, grid wil not render well You do not need any placeAt call when populating the grid - dojo will replace the DOM element that has the id target-node-id with the datagrid. If you are doing it all programmatically, i suggest doing a document.createElement ('div') with an id target-node-id, for example, attach it to a parent node in your html and then create the datagrid specifying the target-node-id as the DOM node to replace
2) in the select onChange event handler, you do not need to create a new datagrid. You just need to update the store - datagrid will update automatically (that is the benefit of using toolkits like dojo) depending on your usecase, you can even reuse the same store and just change the data in it (set clearonclose on the store if it is an itemfilereadstore) See Dojo - How to refresh combobox with updated ItemFileReadStore data for an example of how to repopulate the grid with new data
Upvotes: 1