Dojo Grid Example

Here i am posting an example for Dojo Grid which might be helpful for some others as i was facing lot of problem with it in starting.

Dojo 1.6

<!DOCTYPE HTML>
<html lang="en">
 <head>
  <meta charset="utf-8">
  <title>Demo: Connecting DataGrid to a Store</title>
  <!-- load dojo and provide config via data attribute -->
  <script src="../js/dojo/dojo.js" data-dojo-config="isDebug: true,parseOnLoad: true">
  </script>
  <script>
   dojo.require("dojo.store.JsonRest");
   dojo.require("dojo.store.Memory");
   dojo.require("dojo.store.Cache");
   dojo.require("dojox.grid.DataGrid");
   dojo.require("dojo.data.ObjectStore");
   dojo.ready(function(){
    myStore = dojo.store.Cache(dojo.store.JsonRest({target:"../spr/getGridJSON/"}), dojo.store.Memory());
    grid = new dojox.grid.DataGrid({
     store: dataStore = dojo.data.ObjectStore({objectStore: myStore}),
     structure: [
      {name:"ID", field:"id", width: "200px"},
      {name:"Address", field:"address", width: "200px", editable: true},
      {name:"Name", field:"name", width: "200px"},
      {name:"Gender", field:"gender", width: "200px"},
      {name:"DOB", field:"dob", width: "200px"},
      {name:"Email", field:"email", width: "200px"},
      {name:"Mobile", field:"mobile", width: "200px"},
      {name:"Phone", field:"phone", width: "200px"}
     ]
    }, "target-node-id"); // make sure you have a target HTML element with this id
    grid.startup();
    dojo.query("#save").onclick(function(){
     dataStore.save();
    });
   });
  </script>
 </head>
 <body>
  <h1>Connecting DataGrid to a Store</h1>
  <div id="target-node-id"></div>
  <button id="save">Save</button>
 </body>
</html>

Dojo 1.7

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>Test JsonRest store</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <meta name="viewport" content="width=570" />
  <style type="text/css">
   @import "../../dojo/resources/dojo.css";
   @import "../css/skins/claro.css";
  </style>
  <script type="text/javascript" src="../../dojo/dojo.js" 
   data-dojo-config="async: true"></script>
  <script type="text/javascript">
   require(["dojo/on","dojo/store/Memory", "dojo/store/Cache","dgrid/List", "dgrid/OnDemandGrid","dgrid/Selection", "dgrid/Keyboard","dgrid/Editor" , "dojo/_base/declare", "dojo/store/JsonRest","dojox/grid/DataGrid", "dojo/domReady!"], 
    function(on,Memory, Cache, List, Grid, Selection, Keyboard, Editor, declare, JsonRest, DojoGrid){

     var testStore = dojo.store.Cache(dojo.store.JsonRest({target:"../../../spr/getGridJSON/"}), dojo.store.Memory());

     var columns = [
      {label:'id', field:'id', sortable: false},
      Editor({label: 'Address', field: 'address', autoSave: false},"text", "dblclick"),
      {label:"ID", field:"id"},
      {label:"Address", field:"address", editable: true},
      {label:"Name", field:"name"},
      {label:"Gender", field:"gender"},
      {label:"DOB", field:"dob"},
      {label:"Email", field:"email"},
      {label:"Mobile", field:"mobile"},
      {label:"Phone", field:"phone"}

     ];

      var columns21 = [
          {label:'id', field:'id', sortable: false},
          Editor({label: 'Address', field: 'address', autoSave: false},"text", "dblclick"),
          {label:'name', field:'name', sortable: false},
          {label:'gender', field:'gender', sortable: false},
          {label:'dob', field:'dob', sortable: false},
          {label:'email', field:'email', sortable: false},
          {label:'mobile', field:'mobile', sortable: false},
          {label:'phone', field:'phone', sortable: false}
         ];

     window.grid = new (declare([Grid, Selection, Keyboard]))({
      query: "../../spr/getGridJSON/",
      store: testStore,
      columns: columns21,
      selectionMode: "single"
     }, "grid"); 

     on(document.getElementById("save"), "click", function(){
      alert("here in save button");
      var testId;
      for(var rowId in grid.dirty){
       if(rowId)
       testId = rowId; 
      }
      testId = 0;
      alert(testId);
      grid.save();

     });

    });

  </script>
 </head>
 <body class="claro">
  <h2>A basic grid with JsonRest store</h2>
  <div id="grid"  data-dojo-type="dgrid.Grid"></div>

  <!-- <div id="gridElement" data-dojo-type="dgrid.Grid"></div> -->

   <button id="save">Save</button>
 </body>
</html>

Class i am using JSON get request.
Note: I am using Spring 3.1.0 framework.

	@RequestMapping(value = "/getGridJSON/", method = RequestMethod.GET)
	public @ResponseBody List getDataGrid()
	{
		Map<String, Object> m1 = new HashMap<String, Object>();

		System.out.println("Inside getGridJSON");
		ArrayList<Contact> l1 = new ArrayList<Contact>();

		Contact c1 = new Contact();
		c1.setId(1);
		c1.setAddress("this is first adress");
		c1.setEmail("email");
		c1.setGender("G");

		Contact c2 = new Contact();
		c2.setAddress("this is second adress");
		c2.setId(2);

		Contact c3 = new Contact();
		c3.setAddress("this is third adress");
		c3.setId(3);

		l1.add(c1);
		l1.add(c2);
		l1.add(c3);

		m1.put("list", l1);

		return l1;
	}

Put method definition which will be used in case of saving the grid.

       // Here method type is PUT and not POST
	@RequestMapping(value = "/getGridJSON/{idNo}", method = RequestMethod.PUT)
	public @ResponseBody
	List getDataGridId(@PathVariable("idNo") String idno,@RequestBody Contact ctc)
	{
		Map<String, Object> m1 = new HashMap<String, Object>();

		System.out.println("Inside getGridJSON");
		ArrayList<Contact> l1 = new ArrayList<Contact>();

		Contact c1 = new Contact();
		c1.setAddress("this is second adress");
		c1.setEmail("email");
		c1.setGender("G");
		c1.setId(1);

		l1.add(c1);

		m1.put("list", l1);

		return l1;
	}
By | 2012-04-28T13:17:50+00:00 April 28th, 2012|JavaScript|3 Comments

About the Author:

3 Comments

  1. vivek September 24, 2012 at 6:10 am - Reply

    Can you please explain in details
    what is Dojo?
    What is this example where it imply Dojo ?

  2. Shankar August 20, 2013 at 9:48 am - Reply

    Hi
    I want to bind dojo grid using web service. I hav return url which contains serialized json string. How i will bind it.
    Pls help me in this case.

    Thanks in advance
    Shankar

Leave A Comment