dojo Grid

Can some body give a simple example on how to fill a dojo grid with a json string using the dojo version 1.3.2
LVL 1
cano63Asked:
Who is Participating?
 
leakim971PluritechnicianCommented:
Test page :


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 
	@import "dojo/resources/dojo.css";
	@import "dojox/grid/resources/Grid.css";
	@import "dojox/grid/resources/tundraGrid.css";
	body {
		font-size: 0.9em;
		font-family: Geneva, Arial, Helvetica, sans-serif;
	}
	.heading {
		font-weight: bold;
		padding-bottom: 0.25em;
	}
	#grid, #grid2 {
		width: 65em;
		height: 25em;
		padding: 1px;
	}
</style> 
<script language="javascript" src="dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
<script>

	dojo.require("dojo.data.ItemFileWriteStore");
	dojo.require("dojox.grid.DataGrid");

	function gotItem(item, request) {
		var name = jsonStore.getValue(item, "title");
		name = name.toUpperCase();
		jsonStore.setValue(item, "title", name);
	}

	function getItems() {
//		jsonStore.fetch({onItem: gotItem});
//		grid.filter({actor:"jose1*"})
		var jsonStore2 = new dojo.data.ItemFileWriteStore({url:"CallEspecialistasS"});
		grid.setStore(jsonStore2);
	}

	dojo.addOnLoad(function init () {
	});

</script>
</head>
<body>
<br />
<input type="button" onclick="getItems();" value="set uppercase" />
<br /><br />
<span dojoType="dojo.data.ItemFileWriteStore" jsId="jsonStore" id="jsonStore" url="CallEspecialistasS" ></span>
<table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" store="jsonStore" query="{ actor: 'jose11' }" rowsPerPage="20" rowSelector="20px"> 
	<thead><tr><th field="actor" width="300px">ACTOR</th><th field="title" width="auto">TITLE</th></tr></thead>
</table> 
</body>
</html>

Open in new window

0
 
cano63Author Commented:
or any dojo version ?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
leakim971PluritechnicianCommented:
Another one : http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/test_data_grid.html

json string here : http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/_data/countries.json
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 
	@import "dojo/resources/dojo.css";
	@import "dojox/grid/resources/Grid.css";
	@import "dojox/grid/resources/tundraGrid.css";
	body {
		font-size: 0.9em;
		font-family: Geneva, Arial, Helvetica, sans-serif;
	}
	.heading {
		font-weight: bold;
		padding-bottom: 0.25em;
	}
	#grid, #grid2 {
		width: 65em;
		height: 25em;
		padding: 1px;
	}
</style> 
<script language="javascript" src="dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
<script type="text/javascript">
	dojo.require("dojox.grid.DataGrid");
	dojo.require("dojo.data.ItemFileWriteStore");
</script>
</head>
<body>
<div class="heading">dojox.grid.DataGrid Basic Test</div> 
<span dojoType="dojo.data.ItemFileWriteStore" jsId="jsonStore" url="countries.json"></span> 
<table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" store="jsonStore" query="{ name: '*' }" rowsPerPage="20" rowSelector="20px"> 
<thead>
<tr> 
    <th field="name" width="300px">Country/Continent Name</th> 
    <th field="type" width="auto">Type</th> 
</tr> 
</thead> 
</table> 
</body>
</html>

Open in new window

0
 
cano63Author Commented:
what about somthing  that make a ajax request,

Where i,m lost here is how to manage my json string when i recieve it from the ajax call.
 

0
 
leakim971PluritechnicianCommented:
>what about somthing  that make a ajax request,
dojo currently do an ajax request behind to get the data

>how to manage my json string when i recieve it from the ajax call.
you may to use fetch : youStore.fetch({onItem: doSomething})
for each data you call :


function doSomething(item, request) {
// do what you want with the data
}

Open in new window

0
 
leakim971PluritechnicianCommented:
0
 
leakim971PluritechnicianCommented:
if you want to work on the full json object you should use onComplete instead onItem.

Below an example where we modify the name of the countrie (uppercase) for each item (onItem event) :

(Save this : http://archive.dojotoolkit.org/nightly/dojotoolkit/dijit/tests/_data/countries.json As : countries.json)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css"> 
	@import "dojo/resources/dojo.css";
	@import "dojox/grid/resources/Grid.css";
	@import "dojox/grid/resources/tundraGrid.css";
	body {
		font-size: 0.9em;
		font-family: Geneva, Arial, Helvetica, sans-serif;
	}
	.heading {
		font-weight: bold;
		padding-bottom: 0.25em;
	}
	#grid, #grid2 {
		width: 65em;
		height: 25em;
		padding: 1px;
	}
</style> 
<script language="javascript" src="dojo/dojo.js" djConfig="isDebug:false, parseOnLoad: true"></script>
<script>
	dojo.require("dojo.data.ItemFileWriteStore");
	dojo.require("dojox.grid.DataGrid");
	dojo.require("dijit.form.Button");
	
	function gotItem(item, request) {
		var name = jsonStore.getValue(item, "name");
		name = name.toUpperCase();
		jsonStore.setValue(item, "name", name);
	}

	function getItems() {
		jsonStore.fetch({onItem: gotItem});
	}

	dojo.addOnLoad(function init () {
		var colorStore = new dojo.data.ItemFileWriteStore({url: "countries.json"});
	
	});
</script>
</head>
<body onload="getItems();">
<span id="list"></span>
<span dojoType="dojo.data.ItemFileWriteStore" jsId="jsonStore" id="jsonStore" url="countries.json" ></span>
<table dojoType="dojox.grid.DataGrid" jsid="grid" id="grid" store="jsonStore" query="{ name: '*' }" rowsPerPage="20" rowSelector="20px"> 
	<thead><tr><th field="name" width="300px">Country/Continent Name</th><th field="type" width="auto">Type</th></tr></thead>
</table> 
</body>
</html>

Open in new window

0
 
cano63Author Commented:
Thanks, a lot

What if my json come from a call from the servlet,  in a respons object.


var colorStore = new dojo.data.ItemFileWriteStore({url: "countries.json"});

when you choose the url option, how it work, it make a call to the server a get or post

like this

  dojo.xhrGet( {
           preventCache: "true",
           url: "../StudentSearch,
           handleAs: "json",
           handle: SearchHandler
           });


0
 
leakim971PluritechnicianCommented:
>What if my json come from a call from the servlet,  in a respons object.
var colorStore = new dojo.data.ItemFileWriteStore({url: "../StudentSearch"});

>when you choose the url option, how it work, it make a call to the server a get or post
A GET
0
 
cano63Author Commented:
this is what i have but is not working,




<style type="text/css">
            @import "dojo/dojo/resources/dojo.css";
            @import "dojo/dojox/grid/_grid/Grid.css";
            @import "dojo/dojox/grid/_grid/tundraGrid.css";
      @import "dojo/dijit/themes/tundra/tundra.css";

@import "dojo/dijit/themes/dijit.css";
</style>
<script type="text/javascript" src="dojo/dojo/dojo.js"
            djConfig="isDebug:false, parseOnLoad: true"></script>
      
      <script type="text/javascript">
            dojo.require("dijit.dijit");
            dojo.require("dojox.grid.DataGrid");
            dojo.require("dojo.data.ItemFileWriteStore");
             dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("dojo.parser");
      </script>


    <script>
   
 

   
    var dataStore;
   
      var layout = [
        [{
        field: "actor",
        name: "Actor",
        width: 10
    },
   {
        field: "title",
        name: "Titulo",
        width: 'auto'
    }]];
   
     
      </script>
<script>
function init()
{  

     dataStore = new dojo.data.ItemFileWriteStore({url: "/CallS"});
 }
</script>
<script>
//dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<form>
<div id="grid" style="width: 400px; height: 300px;" dojoType="dojox.grid.DataGrid"
store="dataStore" structure="layout"
rowsPerPage="40">

</div>
<input type="button" name="d" value="d" onclick="init()">
</form>
</body>
</html>

CallS is a servlet and in the get it have this

      String title1 ="New1";
            String title2 = "New2";
            String actor1 = Brad";
            String actor2 = "Oscar";
            
             response.getOutputStream().println("{result:[{actor:"+"\""+actor1+"\",title:"+"\""+title1+"\"}," +
                                                     "{actor:"+"\""+actor2+"\",title:"+"\""+title2+"\"}]");
0
 
leakim971PluritechnicianCommented:
What about :

"identifier":"id","label":"name","items": [

something like :

(please call CallS directly in the browser and post the json string in code snipet)
response.getOutputStream().println("{"identifier":"id","label":"name","items": [{actor:"+"\""+actor1+"\",title:"+"\""+title1+"\"}," +                                                   "{actor:"+"\""+actor2+"\",title:"+"\""+title2+"\"}]");

Open in new window

0
 
cano63Author Commented:
This is what i et in the webbrowser
{result:[{actor:"Jose",title:"Nueva1"},{actor:"Omar",title:"Nueva2"}]

Open in new window

0
 
leakim971PluritechnicianCommented:
It's not a valid json object miss an << } >>at the end to close the object

{result:[{actor:"Jose",title:"Nueva1"},{actor:"Omar",title:"Nueva2"}]}

Open in new window

0
 
leakim971PluritechnicianCommented:
try this :

response.getOutputStream().println("{\"identifier\":\"id\",\"label\":\"name\",\"items\:[{actor:"+"\""+actor1+"\",title:"+"\""+title1+"\"},{\"actor\":"+"\""+actor2+"\",\"title\":"+"\""+title2+"\"}]}");
0
 
cano63Author Commented:
this is the new response

The Stange thing is that i put the server in  debug and add a breake point in the servlet, the system is not hitting the servlet. url option should make an ajax get request ?
0
 
leakim971PluritechnicianCommented:
Put a doPost to for testing purpose
0
 
cano63Author Commented:
well i try something like this and it hit the server, but the url is not hitting it

          dojo.xhrGet( {
           preventCache: "true",
           url: "../StudentSearch,
           handleAs: "json",
           handle: SearchHandler
           });
0
 
cano63Author Commented:
this is what i have now but still no hitting the servlet

Don,t know what i,m missing

this is whta return my servlet

{identifier:"actor",items:[{actor:"jose",title:"pedro"},{actor:"jose",title:"pedro"}]}

<script>

  var  dataStore;
	var layout = [
        [{
        field: "actor",
        name: "Actor",
        width: 10
    },
   {
        field: "title",
        name: "Titulo",
        width: 'auto'
    }]];
    
     
	</script>
<script>
function initX() 
    { 
dataStore = new dojo.data.ItemFileReadStore({url: "CallEspecialistasS"});
     }
</script>

<script>
//dojo.addOnLoad(init);
</script>
</head>
<body class="tundra">
<form>
<div id="grid" style="width: 400px; height: 300px;" dojoType="dojox.grid.DataGrid" 
store="dataStore" structure="layout"
rowsPerPage="40">
</div>

<input type="button" name="d" value="d" onclick="initX()">
</form>
</body>

Open in new window

0
 
leakim971PluritechnicianCommented:
>Don,t know what i,m missing

fast look :


<span dojoType="dojo.data.ItemFileWriteStore

Open in new window

0
 
leakim971PluritechnicianCommented:
you don't define label too
0
 
leakim971PluritechnicianCommented:
The following servlet work for me :

the "identifier" must be unique
if you choose "actor" as "identifier" you can't have twice "jose" .
import java.io.*;
import javax.servlet.*;
import javax.servlet.http.*;

public class CallEspecialistasS  extends HttpServlet {

	public void doGet( HttpServletRequest request, HttpServletResponse response ) throws ServletException, IOException {
		String actor1 = "jose1", title1="pedro";
		String actor2 = "jose2", title2="pedro";
		response.setContentType("application/json");
		response.getOutputStream().println("{\"identifier\":\"actor\",\"label\":\"title\",\"items\":[{\"actor\":\"" + actor1 + "\", \"title\":\"" + title1 +"\"},{\"actor\":"+"\"" + actor2 + "\", \"title\":" + "\"" + title2 + "\"}]}");
	}
	
	public void doPost( HttpServletRequest request, HttpServletResponse response ) throws ServletException, IOException {
		doGet(request, response);
	}
}

Open in new window

0
 
cano63Author Commented:
Ok, Finally is working fine.  Thanks a lot

But what about i want to display the grid but with the filtered data, i know that i have to send the parameter in the url to the get in the servlet, but how i can destroy this grid and create a new one, i try but it just create me a new grid with the new values, but let me the other one so i have to grids
function lod() {
 

        // our test data store for this example:
        var store4 = new dojo.data.ItemFileReadStore({url: "CallEspecialistasS"});

        // set the layout structure:
        var layout4 = [{field: 'actor', name: 'Actor', width: '80px'}, {field: 'title',name: 'Title',width: 'auto'}];

        // create a new grid:
        
        
        var grid4 = new dojox.grid.DataGrid({store: store4,clientSort: true,rowSelector: '20px',structure: layout4 },
        document.createElement('div'));

        // append the new grid to the div "gridContainer4":
        dojo.byId("gridContainer4").appendChild(grid4.domNode);

        // Call startup, in order to render the grid:
        grid4.startup();};
   
  
</script>


<body class="tundra">
<form>


<div id="gridContainer4" style="width: 50%; height: 20%;">
</div>
	<input type="button" name="3" value="3" onclick="lod()">
</form>

Open in new window

0
 
leakim971PluritechnicianCommented:
>how i can destroy this grid and create a new one

no need, you can filter the current content of the datagrid :

gridContainer4.filter({actor:"jose1*"}); // filter all value where the actor value start by "jose1"
0
 
leakim971PluritechnicianCommented:
You've an example here : http://docs.dojocampus.org/dojox/grid/DataGrid

look for the << Filtering data >> example
0
 
cano63Author Commented:
I dont want to filter the data that i have displayed, i want to display totaly new data, that why i wany to destroy it a create a new one with diferent data.
0
 
leakim971PluritechnicianCommented:
same page : http://docs.dojocampus.org/dojox/grid/DataGrid

<< Refreshing the content of a grid >>

we create a new store and set is as stor for the grid
0
 
cano63Author Commented:
Greate Support, Thanks
0
 
leakim971PluritechnicianCommented:
You're very welcome! Thanks a lot for the points!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.