Solved

dojo Grid

Posted on 2010-08-19
30
971 Views
Last Modified: 2013-11-08
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
0
Comment
Question by:cano63
  • 19
  • 11
30 Comments
 
LVL 1

Author Comment

by:cano63
ID: 33481655
or any dojo version ?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33481729
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33481965
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
Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

 
LVL 82

Expert Comment

by:leakim971
ID: 33481984
0
 
LVL 1

Author Comment

by:cano63
ID: 33484996
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
 
LVL 82

Expert Comment

by:leakim971
ID: 33485616
>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
 
LVL 82

Expert Comment

by:leakim971
ID: 33485953
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33486180
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
 
LVL 1

Author Comment

by:cano63
ID: 33486328
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
 
LVL 82

Expert Comment

by:leakim971
ID: 33486464
>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
 
LVL 1

Author Comment

by:cano63
ID: 33486830
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
 
LVL 82

Expert Comment

by:leakim971
ID: 33486989
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
 
LVL 1

Author Comment

by:cano63
ID: 33487227
This is what i et in the webbrowser
{result:[{actor:"Jose",title:"Nueva1"},{actor:"Omar",title:"Nueva2"}]

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 33487260
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
 
LVL 82

Expert Comment

by:leakim971
ID: 33487273
try this :

response.getOutputStream().println("{\"identifier\":\"id\",\"label\":\"name\",\"items\:[{actor:"+"\""+actor1+"\",title:"+"\""+title1+"\"},{\"actor\":"+"\""+actor2+"\",\"title\":"+"\""+title2+"\"}]}");
0
 
LVL 1

Author Comment

by:cano63
ID: 33487708
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
 
LVL 82

Expert Comment

by:leakim971
ID: 33487771
Put a doPost to for testing purpose
0
 
LVL 1

Author Comment

by:cano63
ID: 33488015
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
 
LVL 1

Author Comment

by:cano63
ID: 33488539
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
 
LVL 82

Expert Comment

by:leakim971
ID: 33489270
>Don,t know what i,m missing

fast look :


<span dojoType="dojo.data.ItemFileWriteStore

Open in new window

0
 
LVL 82

Expert Comment

by:leakim971
ID: 33489296
you don't define label too
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33489907
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
 
LVL 1

Author Comment

by:cano63
ID: 33495672
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
 
LVL 82

Expert Comment

by:leakim971
ID: 33497777
>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
 
LVL 82

Expert Comment

by:leakim971
ID: 33497780
You've an example here : http://docs.dojocampus.org/dojox/grid/DataGrid

look for the << Filtering data >> example
0
 
LVL 1

Author Comment

by:cano63
ID: 33497789
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
 
LVL 82

Expert Comment

by:leakim971
ID: 33497806
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
 
LVL 82

Accepted Solution

by:
leakim971 earned 500 total points
ID: 33497870
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
 
LVL 1

Author Closing Comment

by:cano63
ID: 33501830
Greate Support, Thanks
0
 
LVL 82

Expert Comment

by:leakim971
ID: 33501854
You're very welcome! Thanks a lot for the points!
0

Featured Post

Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

816 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now