Dojo - Grid sorting

Dojo - Grid sorting

by Lavakumar T

HTML

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/claro/document.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.6/dojox/grid/resources/claroGrid.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.9/dojo/resources/dojo.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/dojo/1.8.9/dojox/grid/resources/Grid.css">
<div id="grid"></div>

CSS

/* Any demo specific styling needed for this tutorial only */
#grid {
	width: 600px;
	height: 300px;
}

JavaScript

require([
			"dojox/grid/DataGrid",
			"dojo/store/Memory",
			"dojo/data/ObjectStore",
			"dojo/request",
			"dojo/domReady!"
		], function(DataGrid, Memory, ObjectStore, request){
			var grid, dataStore;
			request.get("https://api.myjson.com/bins/7pjv9", {
				handleAs: "json"
			}).then(function(data){
      console.log(data);
				dataStore =  new ObjectStore({ objectStore:new Memory({ data: data.items }) });
console.log(dataStore);
				grid = new DataGrid({	
					store: dataStore,
					query: { id: "*" },
					queryOptions: {},
					structure: [
						{ name: "First Name", field: "firstname", width: "25%" },
						{ name: "Last Name", field: "lastname", width: "20%" },
						{ name: "Designation", field: "designation", width: "20%" },
						{ name: "Salary", field: "salary", width: "15%" },
						{ name: "DOB", field: "dob", width: "20%" }
					]
				}, "grid");
				grid.startup();
			});
		});