Simple Dojo Datagrid + JSON Store
October 7, 2008
Sample Dojo Grid with JSON access below
Works for Dojo 1.2, and not with earlier versions.
And one fabulous improvement with the new grid (dojox.grid.DataGrid) is that when we try to load the data from json, it shows a Loading symbol which i feel is pretty cool compared to the earlier dojox.Grid. And the layout definition is fairly simplified. What i would love to see in future is a framework with which people can work with less scripting knowledge.
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<title>Layout Markup Basic</title>
<style type=”text/css”>
@import “dijit/themes/soria/soria.css”;
@import “dijit/themes/tundra/tundra.css”;
@import “dojox/grid/resources/Grid.css”;
@import “dojox/grid/resources/tundraGrid.css”;
@import “general.css”;
</style>
<script type=”text/javascript” src=”dojo/dojo.js” djConfig=”isDebug:false, parseOnLoad: true”></script>
<script type=”text/javascript”>
dojo.require(”dojo.data.ItemFileReadStore”);
dojo.require(”dojox.grid.DataGrid”);
dojo.require(”dojo.parser”);
dojo.require(”dijit.form.Button”);
dojo.require(”dijit.form.TextBox”);
dojo.require(”dijit.form.DateTextBox”);
dojo.require(”dijit.form.ComboBox”);
dojo.require(”dijit.layout.ContentPane”);
dojo.require(”dijit.layout.TabContainer”);
var jsonStore = new dojo.data.ItemFileReadStore({ url: “MyJson.jsp” });
</script>
</head>
<body class=”soria”>
<table id=”gridNode” jsId=”grid” dojoType=”dojox.grid.DataGrid” autowidth=”true”
query=”{ customer_name: ‘*’ }” store=”jsonStore” class=”tundra” style=”height:300px;width:400px”>
<thead>
<tr>
<th field=”customer_name”>Customer Name</th>
<th field=”customer_address” width=”100px”>Customer Address</th>
</tr>
</thead>
</table>
</body>
</html>
MyJson.jsp Sample goes below:
<%@ taglib prefix=”json” uri=”http://www.atg.com/taglibs/json” %>
<json:object>
<json:array name=”items” var=”item” items=”2″>
<json:object>
<json:property name=”customer_name” value=”nancy”/>
<json:property name=”customer_address” value=”LA”/>
</json:object>
<json:object>
<json:property name=”customer_name” value=”ken”/>
<json:property name=”customer_address” value=”CA”/>
</json:object>
</json:array>
</json:object>
If we need a json to be dynamically associated to the grid on any event, simple 3 steps will do:
- dojo.require(”dojo.data.ItemFileReadStore”);
- jsonStore = new dojo.data.ItemFileReadStore({ url: “<url for json rendering>”})
- var grid = dijit.byId(”gridNode”); // our grid div
- grid.setStore(jsonStore); // no need for a separate refresh call
If you have any comments or corrections, then please leave a comment.
Entry Filed under: OSS, free software, programming, web. .
Trackback this post | Subscribe to the comments via RSS Feed