Sample example for editable datagrid with hidden column(In this example you can set your preferences)
<%@ 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>
<input type="button" value="getValues" onclick="xy()">
</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");
dojo.parser.parse();
itemData={"identifier":"docName",
"items":[{"docSelection":false,"docName":"salary","displayName":"salary_sheet","docId":"Fh23r"},
{"docSelection":false,"docName":"income","displayName":"income_sheet","docId":"Fs23r"},
{"docSelection":false,"docName":"sales","displayName":"sales_sheet","docId":"Ft23r"}]};
for(var i=0;i<itemData.items.length;i++){
if(itemData.items[i].docId=="Fs23r"){//check for your preference value
itemData.items[i].docSelection=true;//dynamically check that check box
}
}
var layout = [ {
"field" : "docSelection",
"name" : "Select Reports",
"width" : "80px",
editable:true,
type: dojox.grid.cells.CheckBox,styles: 'text-align: center;'
}, {
"field" : "docName",
"name" : "DocName",
"width" : "auto"
} , {
"field" : "displayName",
"name" : "DisplayName",
"width" : "auto",
editable:true
}, {
"field" : "docId",
"name" : "DocId",
"width" : "auto",
hidden:true
}];
dataStore = new dojo.data.ItemFileWriteStore(
{ data:itemData }
);
var grid = dijit.byId("billsGrid"); // data grid id
grid.setStructure(layout); // setting physical structure
grid.setStore(dataStore); // setting the data
//here you can set your preferences after user edits the grid and click the button
function xy(){alert("hai");
for(var i=0;i<grid.store._arrayOfAllItems.length;i++){
if(grid.store._arrayOfAllItems[i].docSelection=="true"){//get only which are checked and store them
alert(grid.store._arrayOfAllItems[i].docId);
if(grid.store._arrayOfAllItems[i].displayName!=""){}
else{alert("diaplay name of selected reports cant be empty");}//validation for display name
}
}
}
</script>
</html>
No comments:
Post a Comment