StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PORefreshing DojoGrid
text
Body
copied!<p>I have this grid which displays some data, that is retrieved from database. I am retrieving the data as a <code>JSON string</code> which comes in the form :: </p> <pre><code>[{"ActID":16,"Assigned To":"Anand","Activity Type":"fdsf","Status":"New","Assigned Date":"2012-04-20 00:00:00","Assigned Time":"1899-12-30 17:44:00","Email":"rakesh.shukla@gmail.com"},{"ActID":17,"Assigned To":"Anand","Activity Type":"fdsf","Status":"New","Assigned Date":"2012-04-20 00:00:00","Assigned Time":"1899-12-30 17:44:00","Email":"rakesh.shukla@gmail.com"}] </code></pre> <p>Let me put my code first :: </p> <pre><code><script type="text/javascript"> function getInfoFromServer(){ $.get("http://anandkr08:8080/2_8_2012/jsp/GetJson.jsp?random=" + new Date().getTime(), function (result) { success:postToPage(result), alert('Load was performed.'); },"json"); } function postToPage(data){ alert(data); var storedata = { identifier:"ActID", items: data }; alert(storedata); var store1 = new dojo.data.ItemFileWriteStore({data: storedata}) ; var gridStructure =[[ { field: "ActID", name: "Activity ID", classes:"firstName" }, { field: "Assigned To", name: "Assigned To", classes: "firstName" }, { field: "Activity Type", name: "Activity Type", classes:"firstName" }, { field: "Status", name: "Status", classes: "firstName" }, { field: "Assigned Date", name: "Assigned Date", classes: "firstName" }, { field: "Assigned Time", name: "Assigned Time", classes: "firstName" }, { field: "Email", name: "SendMail", formatter: sendmail, classes: "firstName" }, { field: "ActID", name: "Delete", formatter: deleteact, classes: "firstName" } ] ]; //var grid = dijit.byId("gridDiv"); //grid.setStore(store1); var grid = new dojox.grid.DataGrid({ store: store1, structure: gridStructure, rowSelector: '30px', selectionMode: "single", autoHeight:true, columnReordering:true },'gridDiv'); grid.startup(); dojo.connect(grid, "onRowClick", grid, function(){ var items = grid.selection.getSelected(); dojo.forEach(items, function(item){ var v = grid.store.getValue(item, "ActID"); getdetailsfordialog(v); function showDialog(){ dojo.require('dijit.Tooltip'); dijit.byId("terms").show(); } showDialog(); }, grid); }); } </script> </code></pre> <p>HTML code :: </p> <pre><code><button id="pendingbutton" type="button" style="height: 50px; width: 100px;" onclick="getInfoFromServer()" value="Get Activities">Get Activities</button></center><br><br><br> <center><div id="gridDiv" title="Simple Grid"> </div></center> </code></pre> <p>Now in the above code <code>$.get</code> is called on click of a button (HTML code given above)an data is retrieved from database and grid is displayed for the first time on the page without refreshing the page(as it is called using $.get). Now what i want is when i click the button again. A new data is retrieved( which is working fine, have checked it from <code>alert(data)</code>) but grid is not refreshing itself. I want to refresh the grid without page refreshing. I have tried using <code>setstore</code>(commented out) function but it ain't working for me. Though when i click on a button to get a new data i do get the <code>error</code> in javascript console of google chrome that :: </p> <pre><code>Tried to register widget with id==gridDiv but that id is already registered </code></pre> <p>I think its gotta do something with assigning a new id every time a button is clicked. please help me out with the problem. Thanks. </p> <p>The edited part ::</p> <pre><code>function initGrid(){ var gridStructure =[[ { field: "ActID", name: "Activity ID", classes:"firstName" }, { field: "Assigned To", name: "Assigned To", classes: "firstName" }, { field: "Activity Type", name: "Activity Type", classes:"firstName" }, { field: "Status", name: "Status", classes: "firstName" }, { field: "Assigned Date", name: "Assigned Date", classes: "firstName" }, { field: "Assigned Time", name: "Assigned Time", classes: "firstName" }, { field: "Email", name: "SendMail", formatter: sendmail, classes: "firstName" }, { field: "ActID", name: "Delete", formatter: deleteact, classes: "firstName" } ] ]; dojo.ready(function(){ initGrid(); }); </code></pre> <p>My postToPage function :: </p> <pre><code>function postToPage(data){ alert(data); var storedata = { identifier:"ActID", items: data }; alert(storedata); var store1 = new dojo.data.ItemFileWriteStore({data: storedata}) ; grid = dijit.registry.byId("gridDiv"); grid.set("store", store1); grid.filter(); dojo.connect(grid, "onRowClick", grid, function(){ var items = grid.selection.getSelected(); dojo.forEach(items, function(item){ var v = grid.store.getValue(item, "ActID"); getdetailsfordialog(v); function showDialog(){ dojo.require('dijit.Tooltip'); dijit.byId("terms").show(); } showDialog(); }, grid); }); } </code></pre> <p>Here i am getting <code>error</code> :: </p> <pre><code>Cannot call method 'set' of undefined. </code></pre> <p>I think i have not defined my grid to be a <code>dojogrid.</code> Like this :: </p> <pre><code>var grid = new dojox.grid.DataGrid </code></pre> <p>Can u please elaborate what else i need to write in my <code>initgrid()</code> function. Do i need to make any changes in my HTML code. I have defined structure but not assigned the structure. One more i have more than one dojogrid on same page. But my <code>initgrid</code> function is only one, containing only one structure. what changes i need to made so as i will be able to display other grids also ? My other grid are having different structure and each is represented by an ID in <code><div></code> element. Like above having an ID <code>"gridDiv"</code>. thanks. </p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload