I have this grid which displays some data, that is retrieved from database. I am retrieving the data as a JSON string which comes in the form ::
[{"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":"[email protected]"},{"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":"[email protected]"}]
Let me put my code first ::
<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>
HTML 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>
Now in the above code $.get 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 alert(data)) but grid is not refreshing itself. I want to refresh the grid without page refreshing. I have tried using setstore(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 error in javascript console of google chrome that ::
Tried to register widget with id==gridDiv but that id is already registered
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.
The edited part ::
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();
});
My postToPage function ::
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);
});
}
Here i am getting error ::
Cannot call method 'set' of undefined.
I think i have not defined my grid to be a dojogrid. Like this ::
var grid = new dojox.grid.DataGrid
Can u please elaborate what else i need to write in my initgrid() 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 initgrid 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 <div> element. Like above having an ID "gridDiv". thanks.