Binary Cipher
Using dojo data grid formmtter we can format the data of a row..
the follwing code is simple data grid with first name is link and based on one of the value of row making it as link otherwise normal text…
var myformat = function(val, index) {
if (grid.getItem(index).valid == “true”) {
return “<a href=’#’>” + val + “<a/>”;
} else {
return val;
}
};
the follwing is sample code :
<%@ page language=”java” contentType=”text/html; charset=ISO-8859-1″
pageEncoding=”ISO-8859-1″%>
<!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=ISO-8859-1″>
<title>Grid Formatter Demo</title>
<link
href=”http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojox/grid/resources/claroGrid.css” />
<style type=”text/css”>
@import
“http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojox/grid/enhanced/resources/claro/EnhancedGrid.css”
;
@import
“http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojox/grid/enhanced/resources/EnhancedGrid_rtl.css”
;
/*Grid need a explicit width/height by default*/
#grid {
width: 45em;
height: 20em;
}
</style>
<script type=”text/javascript”
src=”http://ajax.googleapis.com/ajax/libs/dojo/1.10.1/dojo/dojo.js”></script>
<script type=”text/javascript”>
require(
[ “dojo/dom”, “dojo/domReady!”, “dojo/_base/lang”,
“dojo/data/ItemFileWriteStore”, “dojox/grid/DataGrid” ],
function() {
var myformat = function(val, index) {
if (grid.getItem(index).valid == “true”) {
return “<a href=’#’>” + val + “<a/>”;
} else {
return val;
}
};
store = new dojo.data.ItemFileWriteStore({
url : “sampleData.json”
});
grid = new dojox.grid.DataGrid({
store : store,
selectable : true,
structure : [ {
name : “First Name”,
field : “first”,
width : “25%”,
formatter : myformat
}, {
name : “Last Name”,
field : “last”,
width : “25%”
}, {
name : “Visibility”,
field : “valid”,
width : “25%”
} ]
}, “grid”);
grid.startup();
grid.on(“RowClick”,function(evt) {
var idx = evt.rowIndex, rowData = grid
.getItem(idx);
// The rowData is returned in an object, last is the last name, first is the first name
document.getElementById(“results”).innerHTML = “You have clicked on “
+ rowData.first
+ “, “
+ rowData.last
+ “, “
+ rowData.valid;
window.clipboardData.setData(rowData.first+ ” ” + rowData.last + ” “
+ rowData.valid);
}, true);
});
require([ “dojo/keys”, “dojo/dom”, “dojo/on” ], function(keys, dom, on) {
dojo.connect(dom.byId(“grid”), “keypress”, function(evt) {
// handle “onblur” from node “id”
if(evt.charOrCode == keys.CTRL && evt.charOrCode == 67) {
console.log(“ctrl+c”);
}
});
});
</script>
</head>
<body>
<div id=”grid”></div>
<div id=”results”></div>
</body>
</html>
sample data file(sampleData.json)
{
“items”: [{
“first”: “koti”,
“last”: “Reddy”,
“valid”: “true”
},
{
“first”: “vamsi”,
“last”: “kaja”,
“valid”: “true”
},
{
“first”: “Santhosh”,
“last”: “kumar”,
“valid”: “true”
},
{
“first”: “vikki”,
“last”: “kumar”,
“valid”: “false”
}]
}