Simplest editable dojox datagrid (where you can edit displayName attribute and checkbox cor select reports)
<%@ 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>
<link rel="stylesheet" href="<%=request.getContextPath() +
"/dojo1.4.3/dijit/themes/tundra/tundra.css"%>" type="text/css">
<link rel="stylesheet" href="<%=request.getContextPath() + "/dojo1.4.3/dojox/grid/resources/Grid.css"%>" />
<link rel="stylesheet" href="<%=request.getContextPath() + "/dojo1.4.3/dojox/grid/resources/tundraGrid.css"%>" />
</head>
<body class="tundra landing">
<div id="billsGrid" dojoType="dojox.grid.DataGrid" escapeHTMLInData="false">
</div>
</body>
<script language="JavaScript" src="<%=request.getContextPath() +
"/dojo1.4.3/dojo/dojo.js"%>" djconfig="parseOnLoad:true"></script>
<script>
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojox.grid.cells.dijit");//do not forget this
dojo.parser.parse();
var itemData={"identifier":"docName",
"items":[{"docId":false,"docName":"salary","displayName":"salary_sheet"},
{"docId":false,"docName":"income","displayName":"income_sheet"}]};
var layout = [ {
"field" : "docId",
"name" : "Select Reports",
"width" : "80px",
editable:true,
type: dojox.grid.cells.CheckBox,styles: 'text-align: center;'//here we are using checkbox
}, {
"field" : "docName",
"name" : "DocName",
"width" : "auto"
} , {
"field" : "displayName",
"name" : "DisplayName",
"width" : "auto",
editable:true//you have to set this attribute then only it will be editable
}];
var dataStore = new dojo.data.ItemFileWriteStore(
{ data:itemData }//you have to use writestore for editable datagrids
);
var grid = dijit.byId("billsGrid"); // data grid id
grid.setStructure(layout); // setting physical structure
grid.setStore(dataStore); // setting the data
</script>
</html>
No comments:
Post a Comment