dojox.grid.DataGrid Data display.

StackOverflow https://stackoverflow.com//questions/9566720

  •  06-12-2019
  •  | 
  •  

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.

Was it helpful?

Solution

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

OTHER TIPS

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>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top