Displaying Data in Dojogrid using dojo.xhrget() method

Question

I want to display a set of data which i am retrieving by an asynchronous call to the server using dojo.xhrget() method. I am retrieving data through a URL and i want that everytime a user clicks in content pane a new set of values gets displayed in grid without refreshing whole page. The problem is that data is not getting displayed in Grid. I am receiving an error by xhrget() error method.

The code for my script is ::

<script>
function populateGrid(){
    dojo.xhrGet({
        url: "http://localhost:8080/2_8_2012/jsp/GetJson.jsp",
        load: fillGrid,
        error:handleError,
        preventCache:true
        });
}

function fillGrid(data, ioArgs)
{
    alert(data);
        var newData = {
            identifier: "ID",
            items: data
    };

    var dataStore = new dojo.data.ItemFileReadStore({data: newData, id:"dataStoreId"});
    var gridStructure =[[

                          { field: "ID",
                                name: "ID_Emp",
                                width: "20%",
                                classes:"firstName"
                          },
                          {
                              field: "Names",
                              name: "Name",
                              width: "20%",
                              classes: "firstName"
                          },
                          { field: "Email",
                                name: "Mail",
                                width: "20%",
                                classes:"firstName"
                          }

                    ]
              ];

    var grid = dijit.byId("grid.DataGrid");     
    grid.setStore(dataStore);
    grid.startup();
}

function handleError() {
    alert("An error occurred while invoking the service.");
}
</script>

Now , here the output of alert(data) and http://localhost:8080/2_8_2012/jsp/GetJson.jsp is same i.e ::

[{"ID":1,"Names":"Shantanu","Email":"shantanu.tomar@gmail.com"},{"ID":2,"Names":"Mayur","Email":"mayur.sharma@gmail.com"},{"ID":26,"Names":"Rohit"}]

My xhr.get function is working fine in terms of data retrieval. i.e when i update the values in a database. I do get the alert(data) output with that updated value without refreshing the whole page again. But data is not displayed in Data grid.

I am receiving an alert

An error occurred while invoking the service.

The code for http://localhost:8080/2_8_2012/jsp/GetJson.jsp is ::

<%@ page language="java" contentType="application/json; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ page import="MyPackage.PopulateTextbox" %>
<%
String temp1;
PopulateTextbox obj = new PopulateTextbox();
temp1 = obj.method();
%>
<%=temp1 %>

The markup code is ::

<div id="grid.DataGrid" data-dojo-type="dojox.grid.DataGrid"  title="Simple Grid" data-dojo-props= "autoWidth:true, structure: gridStructure" style="width:900px; height:200px;"></div>

<div id="contentpaneid" dojoType="dijit.layout.ContentPane" title="Pending Activities" style="background-image: url('http://localhost:8080/2_8_2012/images/17.png');" onclick="populateGrid">

I am not getting what's the problem. Can u please help me out on why am i getting an error alert. thanks.

I tried displaying whats the error.. and i gt this :: 404 Grid is undefined. — Shantanu Tomar, Mar 19 '12 at 10:53
I got to this question from your more recent one, from where you have linked this. After reading your question, I think , you are trying to bind your data to your datagrid, before it is actually retrieved. So, unknowingly you are binding your grid to null/undefined object, which probably is producing the error you see. Not sure, but you just confirm once, if this is the case. — MrClan, Mar 19 '12 at 12:42

score 2 · Answer 1 · edited May 23 '17 at 11:56

2

Pratik Chandra rightly alluded to the issue - the datagrid is being populated without any store being set. I suggest changing your datagrid to be populated programmatically

So your declaration:

<div id="grid.DataGrid" data-dojo-type="dojox.grid.DataGrid"

neeeds to be changed to:

<div id="mygrid" ></div>

and then change the line:

var grid = dijit.byId("grid.DataGrid");

to:

var grid = new dojox.grid.DataGrid({
                id: "grid",
                jsid: "grid",
                store: dataStore,
                structure: gridStructure,
                style: 'width:900px;height:300px;'
            }, dojo.byId("mygrid"));
grid.startup();

Also note that whenever you want to refresh the data in the grid, you do not need to repopulate the grid, you can just update the datastore with new values and the datagrid will automatically refresh with new data :-) Dojo takes care of that part.

To clean existing data in the datastore and populate it with new data, set the clearOnClose property on your IFRS. See: Updating Dojo Dijit FilteringSelect's store with asynchonous data to learn about clearOnClose

edited May 23 '17 at 11:56

Community

1
1

answered Mar 19 '12 at 14:12

Vijay Agrawal

3,751
2
23
25

Thanks Vijay for the code. I have tried it and i am getting the data in grid. But when i click 2nd time i don't get the data updated in the grid. Alert(data) is updating fine. But data in grid is not getting updated. Do i have to use fetch() related statements ? If so can u please point out the exact location as to where to put fetch statement. ? thanks – Shantanu Tomar Mar 20 '12 at 06:24
here's my Itemfilereadstore statement. Other changes i have made to the code are exactly as u have told me to do so .. var dataStore = new dojo.data.ItemFileReadStore({data: newData, id:"dataStoreId", clearOnClose:true}); – Shantanu Tomar Mar 20 '12 at 06:27
so your onclick function should look something like this: function onCpaneClick() { var deferred = dojo.xhrGet( { url: "", handleAs: "json", load: function(data){ dataStore.data = newdata; dataStore.close(); grid.refresh(); }, error: function(error){ //handle error }); – Vijay Agrawal Mar 20 '12 at 14:02

Displaying Data in Dojogrid using dojo.xhrget() method

1 Answers1

Linked