Data is not getting displayed in dojox.data.Datagr

Question

I want to display data in a data grid. The data is retrieved by a URL using $.get Method as a JSon type. I am not getting any error. But not getting Data grid as well. Here's me script code ::

<script type="text/javascript">
$("document").ready(function(){
    $('#contentpaneid').bind('click', getInfoFromServer);
    function getInfoFromServer(){
        $.get("http://localhost: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:"ID",
        items: data //[{"ID":1,"Names":"Shantanu","Email":"[e-mail]"},{"ID":2,"Names":"Mayur","Email":"[e-mail]"},{"ID":3,"Names":"Rohit"},{"ID":21,"Names":"Rakesh","Email":"askjhjk"}] 

};

    var store1 = new dojo.data.ItemFileWriteStore({data: storedata}) ;
    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 = new dojox.grid.DataGrid({

        store: store1,
        structure: gridStructure,
        rowSelector: '30px',
        selectionMode: "single",
        autoHeight:true,
        columnReordering:true

        },'gridDiv');


    grid.startup();
    dojo.connect(grid, "onSelectionChanged", grid, function(){
                var items = grid.selection.getSelected();



            //  do something with the selected items
                dojo.forEach(items, function(item){
                    var v = grid.store.getValue(item, "Names");

                    function showDialog() {
                        dojo.require('dijit.Tooltip');
                        dijit.byId("terms").show();
                    }

                    showDialog();
                    }, grid);

            });


            dojo.connect(grid, "onCellClick", grid, function sendmail(){
                var items = grid.selection.getSelected();

                dojo.forEach(items, function(item){
                    var v1 = grid.store.getValue(item, "Email");       
                    alert(v1);
                    request.setAttribute("variablemail", v1);
            });
    });

};
};
});
</script>

My markup code is ::

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

<div data-dojo-id="gridDiv" title="Simple Grid" style="width:900px; height:200px;">

When i click inside content pane I get my alert(data) output as when retrieving data as JSon through $.get method ::

[Object object][Object object][Object object](The number of [Object object] depends on number of entries in Database)

And output when Retrieving data as Text is ::

[{"ID":1,"Names":"Shantanu","Email":"[e-mail]"},{"ID":2,"Names":"Mayur","Email":"[e-mail]"},{"ID":3,"Names":"Rohit"},{"ID":21,"Names":"Rakesh","Email":"askjhjk"},{"ID":22,"Names":"Hello"}]

Now when i update the data I do get my data alert ryt. i.e value is getting updated in alert(data) my $.get function is working fine. And also getting alert('Load was performed.') message. But grid is not getting displayed. Its not the data .but grid is also not getting displayed. On click only alert boxes appear. that's it. Where am i making mistake ? And i should retrieved the data as text or JSON so that values are correctly passed on to "items:". please help. i want that on click event the grid refreshes itself according to changes in database. Thanks.

Answer 1

Change

<div data-dojo-id="gridDiv"...

to

<div id="gridDiv" ...

Note that data-dojo-id is meant to be used to create a global JS variable that holds the widget. In your situation, you are populating the datagrid and asking dojo to replace a DOM node with id gridDiv with the datagrid. Since dojo is not able to find such a node, you are not seeing the datagrid