asked on

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

cano63

ASKER

or any dojo version ?

leakim971

View source here :
http://archive.dojotoolkit.org/nightly/checkout/dojox/data/demos/demo_QueryReadStore_grid.html

the json string : http://archive.dojotoolkit.org/nightly/checkout/dojox/data/tests/stores/QueryReadStore.php

leakim971

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

leakim971

A great article here : http://www.ibm.com/developerworks/web/library/wa-aj-dojogrid/index.html
A good link : http://www.sitepen.com/blog/2008/07/14/dojo-12-grid/

cano63

ASKER

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.

leakim971

>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

leakim971

you've good example here where data is fetched :
http://docs.dojocampus.org/dojo/data/ItemFileWriteStore
http://docs.dojocampus.org/dojo/data/ItemFileReadStore

leakim971

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

cano63

ASKER

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
});

leakim971

>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

cano63

ASKER

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+"\"}]");

leakim971

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

cano63

ASKER

This is what i et in the webbrowser

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

Open in new window

leakim971

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

leakim971

try this :

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

cano63

ASKER

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 ?

leakim971

Put a doPost to for testing purpose

cano63

ASKER

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
});

cano63

ASKER

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

leakim971

>Don,t know what i,m missing

fast look :

<span dojoType="dojo.data.ItemFileWriteStore

Open in new window

leakim971

you don't define label too

leakim971

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

cano63

ASKER

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

leakim971

>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"

leakim971

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

look for the << Filtering data >> example

cano63

ASKER

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.

leakim971

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

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

cano63

ASKER

Greate Support, Thanks

leakim971

You're very welcome! Thanks a lot for the points!