A Simple Grid
To begin working with Grid, let's start with a simple example. The Dijit class directory is kept in /dijit/tests/_data/dijits.json. We'll base on a grid on it, and add embellishments throughout the next few sections.
The Basics
Every page using Grid needs to import the basic grid style sheet. When used with Dijit and Dojo, your combined style loading block should look like:
/* tundraGrid.css matches Dijit Tundra style. Others forthcoming.
Use Grid.css on the same path for a more color-neutral theme */
@import "http://o.aolcdn.com/dojo/1.0.0/dojox/grid/_grid/tundraGrid.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
</style>
The Model
Each Grid begins with data, and two DIV tags will define our data source. Because of the same-origin security rule, you will need to place the data file on your web server. You can download this file, dijits.json, at the bottom of this page. Just place it in the same directory as the example:
jsId="jsonStore" url="dijits.txt">
</div>
<div dojoType="dojox.grid.data.DojoData" jsId="model"
rowsPerPage="20" store="jsonStore" query="{ namespace: '*' }">
</div>
The first DIV should look familiar. It's the good ol' dojo.Data definition you use with the Dijit components ComboBox or Tree. The second is new - it's the dojox.grid.data.DojoData adapter that turns a data source into a Grid model. The model has options for which items to select. In this example, we turn the datasource jsonStore into the model named "model".
Models can also be created from JavaScript arrays, which we'll see in: Model Options.
The View
In standard spreadsheet and table terminology, a cell is the basic unit of displayed data. A row is a horizontally aligned contiguous group of cells, and a column is a vertically aligned contiguous group of cells. (Wow, that makes a simple concept sound complex!)
In grid-land, there's a distinction between rows and subrows. A subrow is what people normally think of as a row - it's exactly one cell tall. In Grid, a row may be more than one subrow - but it is selectable as a unit. So you'll notice in our demo grid that logical rows are exactly 2 subrows tall.
A View is a group of contiguous logical rows with the same inner and outer "shape". In our example above, each logical row is two subrows tall, with 2 columns on the top physical row and 1 column on the bottom physical row (the last cell spanning 2 columns). You specify this in JavaScript with an array of arrays. Each array element is an object literal. The most important property of the object is "name", which names the column. The column name always appear as the top logical row of the grid, and unlike other rows, it doesn't scroll up or down.
// a grid view is a group of columns
var view1 = {
cells: [[
{name: 'Namespace', field: "namespace"},
{name: 'Class', width: "25em", field: "className"}
],
[
{name: 'Summary', colSpan:"2", field: "summary"}
]
]
};
Fields in the model are applied across each view cell in order. Property names are ignored. In our example, Namespace holds field 0, Class holds field 1, and so on.
As in good ol' HTML tables, you can specify:
- colSpan - note the capital "S" here, unlike standard HTML
- rowSpan
- width - all the usual CSS measurements are valid here
The Structure
Finally, views can be grouped together into a structure. You can think of a structure as a dijit.layout.LayoutContainer applied to views - you can place views in the top, bottom, left and/or right sides, plus one in the middle. Our simple example only has one view:
var layout = [ view1 ];
The Widget
The model and structure (which is composed of views) come together in the grid widget:
The model and structure attributes point to our JavaScript variables for the model and structure. Nice! And with no other code, the grid is:
- scrollable
- sizable in the columns - point between columns on the top and drag left or right
- row-selectable - just click anywhere on a row
So, here's the entire program:
<html>
<head>
<title>Test dojox.Grid Basic</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
<style type="text/css">
@import "http://o.aolcdn.com/dojo/1.0.0/dojox/grid/_grid/tundraGrid.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";
@import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"
body {
font-size: 0.9em;
font-family: Geneva, Arial, Helvetica, sans-serif;
}
.heading {
font-weight: bold;
padding-bottom: 0.25em;
}
#grid {
border: 1px solid #333;
width: 35em;
height: 30em;
}
</style>
<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js"
djConfig="isDebug:false, parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
dojo.require("dojo.parser");
// a grid view is a group of columns.
var view1 = {
cells: [[
{name: 'Namespace', field: "namespace"},
{name: 'Class', width: "25em", field: "className"}
],
[
{name: 'Summary', colSpan:"2", field: "summary"}
]
]
};
// a grid layout is an array of views.
var layout = [ view1 ];
</script>
</head>
<body class="tundra">
<div class="heading">Our First Grid</div>
<div dojoType="dojo.data.ItemFileReadStore"
jsId="jsonStore" url="dijits.txt">
</div>
<div dojoType="dojox.grid.data.DojoData" jsId="model"
rowsPerPage="20" store="jsonStore" query="{ namespace: '*' }">
</div>
<div id="grid" dojoType="dojox.Grid" model="model" structure="layout"></div>
</body>
</html>
Note that normally with CDN, you would need to wrap the view1 initialization code like in a dojo.addOnLoad. But that's not necessary here because no DOM needs to be drawn yet. We're just setting up anonymous objects. Because these are available when the widgets are drawn, we can use the structure property in the Grid tag. The design is nice and clean.
Now let's cover the model, view and structure elements in more depth:
| Attachment | Size |
|---|---|
| dijits.txt | 20.07 KB |
- Printer-friendly version
- Login or register to post comments
- Subscribe post
How to refresh the grid when underlying data changes
The grid widget is great!
I wonder if there is nice programatical way (assuming having a grid setup like decribed above) to update the grid when the data on the server side changes (like dijits.txt has changed when requerying)?
I searched the site and tried several methods form the grid object (refresh, render, update) but couldn't find anything helpful.
Yes, just use
... QueryReadStore for your data store. I think there's an example on the Sorting page of how to do it.
There is an internal method
There is an internal method _refresh() which updates the grid.
You can use it like this:
var grid = new dojox.grid.DataGrid({},someNode);
var store = new YourStore({grid: grid});
grid.setStore(store);
and then in your setValue, setValues or unsetAttribute methods, you just call this.grid._refresh();
but note that this is not the nice way to do it - it is better to use dojox.grid.* update() method which invokes _refresh() under the hood.
Some experiments with Version 1.0.2...
...can be seen here:
http://www.nabble.com/Dojo-Grid-trouble-%28autowidth%2C-autoheight%2C-wi...
Grid in dialog
Just to comment, I just had a little problem showing this sample on a Dialog.. It was solved calling the .render() method of the grid.
Regards!
How to show a picture in a cell
I tried this:
var img = "<img src=\"img/img1.jpg\"/>";
var data = [
[img]
];
var vista1 = {
cells: [[
{name: 'Imagen', width: "80px", height: "65px"}
]]
};
Can I do this in other way???
(Very minor) No need to download dijits.txt for html sample code
With 1.0.2, if you save the above html into /[top dojo directory]/dijit/tests/, you can change
to
and everything will work fine.
Is there a way to overirde the name of the items arrays?
that is the ItemFileReadStore assumes there is an items array element holding the rows
{"timestamp":1193692111, "items":[
{"Version":"1","title":"The title","body":"This is ...","created":"2007-11-07 00:44:54"},
{"Version":"2","title":"A title once again","body":"And ...","created":"2007-11-07 00:45:15"}
]}
is it possible to send
{"timestamp":1193692111, "versions":[
{"Version":"1","title":"The title","body":"This is ...","created":"2007-11-07 00:44:54"},
{"Version":"2","title":"A title once again","body":"And ...","created":"2007-11-07 00:45:15"}
]}
and reconfig the ItemFileReadStore to identify items using the "versions" element?
about the model - integration with server-side
How can I load json from server side, considering the fact that I am using jsp page.
I was trying something like
...
<script type="text/javascript">
var myData = "<%=com.app.Model.getJSON()%>
</script>
<body>
<div dojoType="dojo.data.ItemFileReadStore"
jsId="jsonStore" data="myData"> </div>
...
but it doesn't work.
How can I make this integration? I couldn't find specific documentation in dojo site about
integrating with server side during page load, only regarding Ajax.
I'll appreciate any help, our company it testing now using dojo as the UI framework for our product.
Thanks
mimetype problem
When I tried to implement the simple grid exactly in the syntax above locally and opened it using IE 6
the browser first blocked the content of the grid for security reason and I had to manually allow it to be displayed.
the dojo console displayed the error:
Consider using mimetype:text/json-comment-filtered to avoid potential security issues with JSON endpoints (use djConfig.usePlainJson=true to turn off this message)
How can avoid this warning? note that I load the JSON statically from the dijits.txt file.
I saw support answers about this issue that suggest using xhr.get
dojo.xhrGet({
handleAs: "json",
url: "foo.json"
});
but I don't think it is relevant for this example since I am using json from a file.
Thank you
does it only support English?
I'm a Chinese student , I copy the whole code and make test on my computer,
with the Windows-xp-Chinese .
This demo only give "?" in the grid , only one line.
I find the same problem when I'm using "ItemFileReadStore" to list Chinese articles : only "?" , no data.
There is a bug about dojox.grid.Grid
Well , I found another problem.
When I'm using "Grid" together with "LayoutContainer" , I find the "Grid" will be useless. Here is the whole code:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dojo Proto</title>
<style type="text/css">
@import "/plugins/dojo/dojox/grid/_grid/tundraGrid.css";
@import "/plugins/dojo/dojo/resources/dojo.css";
@import "/plugins/dojo/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" src="/plugins/dojo/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
dojo.require("dijit.layout.LayoutContainer");
dojo.require("dijit.layout.ContentPane");
</script>
<script type="text/javascript">
var evenementsStore = new dojo.data.ItemFileReadStore({url: "_php_json_9_15.php"});
var evenementsModel = new dojox.grid.data.DojoData(null, evenementsStore, {query:{ id :'*' }, clientSort:true});
var evenementsStructure = [{cells: [[
{name: 'Type', width: "25%", field: "typeEvt"},
{name: 'Date', width: "25%", field: "date"},
{name: 'Nom', width: "50%", field: "name"}
]]}];
</script>
</head>
<body class="tundra">
<div dojoType="dijit.layout.LayoutContainer">
<div dojoType="dijit.layout.ContentPane" layoutAlign="client">
<div id="grid" dojoType="dojox.Grid" model="evenementsModel" structure="evenementsStructure"></div>
</div>
<div dojoType="dijit.layout.ContentPane" layoutAlign="left">
<div id="grid_2" dojoType="dojox.Grid" model="evenementsModel" structure="evenementsStructure"></div>
</div>
</div>
</body>
/*********************************_php_json_9_15.php*******************************/
<?php
$path = $_SERVER['DOCUMENT_ROOT'].'/plugins/adodb/adodb.inc.php';
include($path);
$db = & NewADOConnection('mysql');
$db->Connect("localhost","root","pwd","db_company");
$sql = "select * from t_articles";
$result = $db->Execute($sql);
if($result===false){
die("NOTHING REMAINS");
}
$array_1 = array();
while(!$result->EOF){
$array_2 = $result->GetRowAssoc($toupper=false);
$result->MoveNext();
extract($array_2);
$array_3 = array(
'id'=>$at_id,
'typeEvt'=>$at_title,
'date'=>$at_title,
'name'=>$at_title,
);
array_push($array_1,$array_3);
}
$db->Close();
$array = array(
'identifier'=>'id',
'items'=>$array_1,
);
$json_string = json_encode($array);
echo $json_string;
?>
But if I use "Grid" without "LayoutContainer" , It appears ok :
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dojo Proto</title>
<style type="text/css">
@import "/plugins/dojo/dojox/grid/_grid/tundraGrid.css";
@import "/plugins/dojo/dojo/resources/dojo.css";
@import "/plugins/dojo/dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" src="/plugins/dojo/dojo/dojo.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.Grid");
dojo.require("dojox.grid._data.model");
</script>
<script type="text/javascript">
var evenementsStore = new dojo.data.ItemFileReadStore({url: "_php_json_9_15.php"});
var evenementsModel = new dojox.grid.data.DojoData(null, evenementsStore, {query:{ id :'*' }, clientSort:true});
var evenementsStructure = [{cells: [[
{name: 'Type', width: "25%", field: "typeEvt"},
{name: 'Date', width: "25%", field: "date"},
{name: 'Nom', width: "50%", field: "name"}
]]}];
</script>
</head>
<body class="tundra">
<h1>Dojo Proto</h1>
<div id="grid" dojoType="dojox.Grid" model="evenementsModel" structure="evenementsStructure"></div>
</body>
How to clear Dojo Grid
I want to search something in Dojo Dialog using Widgets after clicking on CLICK HERE button. initially on clicking CLICK HERE button there only textfield button and Search button. after entering data and click on search button a table come up in a GRID Format in a Dojo Dialog. my problem is that when user close dialog and again click on CLICK HERE button then it shouldn't show the previous search result .So, for that i try show/hide div but it doesn't work on IE. now i want to flush the grid when i click on CLICK HERE button. what is a better way to do that?
Thanks in Advance
Salil
Cipher-Tecnologies
salil@cipher-tech.com
It doesn't seem to work for me using dojo locally
I have taken the code published above and copied it to a local document, that works fine, but if I change the references to point to a local copy of dojo-release 1.1.1 it does not work.
There seem to be a couple of problems. First there is no file in the releas tree named dojo.xd.js, see:
jim@blackie:/var/www$ find js/dojo-release/ | grep dojo.xd.js
jim@blackie:/var/www$
So if I leave that pointing to aol, I then get: djConfig (from dojo.xd.js) is not defined followed by a number of errors.
So what's the secret to running this on 1.1.1?
Thanks,
Jim.
here is what I did change
here is what I did
change dojo.xd.js to dojo.js
also change
dojo.require("dojox.grid._data.model"); to dojo.require("dojox.grid.compat._data.model");