Solved

dojo Grid

Posted on 2010-08-19
30
967 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
Comment Utility
or any dojo version ?
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
0
 
LVL 1

Author Comment

by:cano63
Comment Utility
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
Comment Utility
>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
Comment Utility
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
Comment Utility
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
Comment Utility
>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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
try this :

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

Quip adds documents, spreadsheets, and tasklists to your Slack experience
- Elevate ideas to Quip docs
- Share Quip docs in Slack
- Get notified of changes to your docs
- Available on iOS/Android/Desktop/Web
- Online/Offline

 
LVL 1

Author Comment

by:cano63
Comment Utility
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
Comment Utility
Put a doPost to for testing purpose
0
 
LVL 1

Author Comment

by:cano63
Comment Utility
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
Comment Utility
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
Comment Utility
>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
Comment Utility
you don't define label too
0
 
LVL 82

Expert Comment

by:leakim971
Comment Utility
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
Comment Utility
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
Comment Utility
>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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
Greate Support, Thanks
0
 
LVL 82

Expert Comment

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

Featured Post

Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

Join & Write a Comment

I've been trying to accomplish this for a while and it just struck me yesterday how to accomplish this task. I have done searches all over the internet looking for ways to email pages from my applications and finally I have done it!!! Every single s…
This article discusses how to create an extensible mechanism for linked drop downs.
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…

762 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

12 Experts available now in Live!

Get 1:1 Help Now