dojox.grid.DataGrid Data display.

Question

I have this JSP page. When i run it i don't get any errors. But don't get the data either using Data Grid.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="MyPackage.PopulateTextbox" %>
<%@ page import="java.sql.*" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
@import "http://localhost:8080/2_8_2012/js/dojo/resources/dojo.css";

@import "http://localhost:8080/2_8_2012/js/dijit/themes/nihilo/nihilo.css";
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" djConfig="isDebug: false, parseOnLoad: true"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">

dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.data.ItemFileWriteStore");
</script>
<%
String temp1;
PopulateTextbox obj = new PopulateTextbox();
temp1 = obj.method();
request.setAttribute("variable", temp1); 
%>

<script type="text/javascript">
dojo.ready(function(){
var myVar = <%= request.getAttribute("variable") %>
var storedata={
            identifier:"table1",
            label:"name",
            items: myVar
    };

var store = new dojo.data.ItemFileReadStore({data: storedata});
    var gridStructure =[[

                      { field: "ID",
                            name: "ID_Emp",
                            width: "40%"
                      },
                      {
                          field: "Names",
                          name: "Name",
                          width: "40%"
                      }

                ]
          ];


     var grid = new dojox.grid.DataGrid({
            id: 'grid',
            store: store,
            structure: gridStructure,
            });
          //document.createElement('div'));

        /*append the new grid to the div*/
        //dojo.byId("gridDiv").appendChild(grid.domNode);

        /*Call startup() to render the grid*/
        grid.startup();
});
</script>

<title>Dojo Data</title>
</head>
<body>
<div jsid="grid" id="mygrid" dojoType="dojox.grid.DataGrid" title="Simple Grid" style="width: 500px; height: 150px;">
</div>


</body>
</html>

When i run this page. And go to View Source i get the following ::

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css"> 
@import "http://localhost:8080/2_8_2012/js/dojo/resources/dojo.css";

@import "http://localhost:8080/2_8_2012/js/dijit/themes/nihilo/nihilo.css";
</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js" djConfig="isDebug: false, parseOnLoad: true"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript"> 

dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
</script>


<script type="text/javascript"> 
var myVar = [{"ID":1,"Names":"Shantanu"},{"ID":2,"Names":"Mayur"},{"ID":3,"Names":"Rohit"},{"ID":4,"Names":"Jasdeep"},{"ID":5,"Names":"Rakesh"}];
var storedata={
            identifier:"table1",
            label:"name",
            items: myvar
    };
    var gridStructure =[{
    cells:[
                [
                      { field: "ID",
                            name: "ID_Emp",
                            width: "40%", styles: 'text-align: right;'
                      },
                      {
                          field: "Names",
                          name: "Name",
                          width: "40%", styles: 'text-align: right;'
                      }

                ]
          ]
    }];
</script>

<title>Dojo Data</title>
</head>
<body class=nihilo>

<div style="width: 400px; height: 300px;">
  <div data-dojo-type="dojo.data.ItemFileReadStore" data-dojo-id="countryStoreForGrid" data-dojo-props="data:storedata"></div>
  <div id="grid"
    data-dojo-type="dojox.grid.DataGrid"
    data-dojo-props="store:countryStoreForGrid,
    structure:'gridStructure',
    rowsPerPage:40">
  </div>
</div>

</body>
</html>

I have got Data in myVar(used for ITEMS in JSP page) as it shows in View source page. But still nothing gets displayed on screen. Is there any error in my HTML BODY tag. ? Please help me with this. thanks.

score 0 · Accepted Answer · answered Mar 05 '12 at 16:52

Try changing

var storedata={
        identifier:"table1",

to

var storedata={
        identifier:"ID",

Note that identifier specifies the attribute in the item to be used as the unique identifier in the data

see http://livedocs.dojotoolkit.org/dojo/data/ItemFileReadStore for details

score 0 · Answer 2 · answered Mar 05 '12 at 17:33

There are a couple of bugs in the html code that you posted.

The identifier in store data was incorrect (as Vijay pointed out).

myvar is not the same as myVar

I don't believe that Dojo 1.4 uses the HTML5 data- attributes, so I updated the code to use 1.7

I added the grid stylesheets

<html>
<head>
<style type="text/css"> 
   @import "http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/resources/dojo.css";
   @import "http://ajax.googleapis.com/ajax/libs/dojo/1.7/dijit/themes/nihilo/nihilo.css";
   @import "http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/resources/Grid.css";
   @import "http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojox/grid/resources/nihiloGrid.css";
</style>

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7/dojo/dojo.js" data-dojo-  config="isDebug: true, parseOnLoad: true"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript"> 

dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
</script>

<script type="text/javascript"> 
var myVar = [{"ID":1,"Names":"Shantanu"},{"ID":2,"Names":"Mayur"},{"ID":3,"Names":"Rohit"},{"ID":4,"Names":"Jasdeep"},{"ID":5,"Names":"Rakesh"}];
var storedata={
    identifier: "ID", // This is the property that gives a unique id accross all items.
    label:      "name",
    items:      myVar
};
var gridStructure =[[
  {
    field:  "ID",
    name:   "ID_Emp",
    width:  "40%", styles: 'text-align: right;'
  },
  {
    field:  "Names",
    name:   "Name",
    width:  "40%", styles: 'text-align: right;'
  }
]];
</script>

<title>Dojo Data</title>
</head>
<body class="nihilo">

<div style="width: 400px; height: 300px;">
  <div data-dojo-type="dojo.data.ItemFileReadStore" data-dojo-id="countryStoreForGrid" data-dojo-props="data:storedata"></div>
  <div id="grid"
data-dojo-type="dojox.grid.DataGrid"
data-dojo-props="store:countryStoreForGrid, structure:gridStructure, rowsPerPage:40">
  </div>
</div>

</body>
</html>

Ks..Thanks.. Will do the necessary changes and see if it works. Sir, apart from that is my HTML code inside tags correct. i mean is there anything i need to add or i am forgetting to make my DojoDataGrid work? — Shantanu Tomar, Mar 05 '12 at 18:16
Sir can u help me with this :: http://stackoverflow.com/questions/9579428/perform-an-event-on-selecting-a-prticular-row-in-dojox-grid-datagrid — Shantanu Tomar, Mar 06 '12 at 08:17

dojox.grid.DataGrid Data display.

2 Answers2