Binary Cipher
Before doing this example you should have this files
dgrid you will get from this https://github.com/SitePen/dgrid
its dependencies
place all in this structure
dojoàdojo
dijit
dgrid
xstyle
put-selector
dgridexample.jsp
<html>
<head>
<link rel=“stylesheet”type=“text/css”
href=“../dojo/dojo-release-1.9.3/dijit/themes/dijit.css”>
<link rel=“stylesheet”type=“text/css”
href=“../dojo/dojo-release-1.9.3/dijit/themes/tundra/tundra.css”>
<title>dgridexample</title>
<meta http-equiv=“Content-Type”content=“text/html; charset=ISO-8859-1”>
</head>
<body class=“tundra”>
<div id=“grid”></div>
<script type=“text/javascript”
data-dojo-config=“isDebug: false, async: true, parseOnLoad: true”
src=“../dojo/dojo-release-1.9.3/dojo/dojo.js”></script>
<script type=“text/javascript”src=“../dojo/dojo-release-1.9.3/js/dgridexampleJS.js”>
</script>
</body>
</html>
dgridexampleJS.js
require([ “dgrid/Grid”, “dojo/domReady!” ], function(Grid) {
// Takes data as an array of objects [{ first:”bob”,last:”last”} , {…}, …]
var data = [ {
first : “Bob”,
last : “Barker”,
age : 89
}, {
first : “Vanna”,
last : “White”,
age : 55
}, {
first : “Pat”,
last : “Sajak”,
age : 65
} ];
var data1 = [ {
first : “Bob1”,
last : “Barker”,
age : 89
}, {
first : “Vanna”,
last : “White”,
age : 55
}, {
first : “Pat”,
last : “Sajak”,
age : 65
} ];
/*
* using Grid class we can create Simple Grid which takes data as an array of objects
* there is one more Gird called OnDemandGrid which uses Stores for data to display
*
* when you use basic grid at first it will be empty until you call renderArray method
*
* When we go to advanced grid automatically populate data into grid from the store
*
* To expand functionalities to this gird use mixins, plugins,extensions
* Basically basic grid does not contain keybord navigation row/cell selection etc this we can achive by using mixins
* varExpandedGrid = declare( [Grid,Keyboard,Selection ]);
* vargrid = new ExpandedGrid( { columns : {
first : “First Name”,
last : “Last Name”,
age : “Age”
},
selectionNode:”single”
} ,”grid”);
*
Using mixins we have selectable rows to handle those things we have events
*
* grid.on(“dgrid-select”,function(evnet){});
*/
var grid = new Grid({
/*
* structure we can define in three ways
* 1st WAY field name and label
* columns:[
* { field:”first” ,label :”FirstName”},{ field:”last”,label:”LastName”}
* ]
*
* 2nd WAY
* key –field name
* columns:[ first:{ label:”FirstName” } ]
*
* 3rd WAY –key field name ;–value Label
* columns:[ first:”First Name” ]
**/
columns : {
first : “First Name”,
last : “Last Name”,
age : “Age”
}
}, “grid”);
//this will append data to grid
grid.renderArray(data);
//this will clear data from grid
grid.refresh();
grid.renderArray(data1);
});