dojo data grid example
getting student results and showing in grid format
1)the js file:-
dojo.xhrGet({
url : "finalData",//
back end servlet
handleAs : "json",
timeout : 50000,
load : function(response, ioArgs) {
var itemData=eval(response); //
i will be getting the response as data to be populated in grid
var dataStore = new dojo.data.ItemFileReadStore(
{ data:itemData }
);
var grid = dijit.byId("billsGrid"); //
data grid id
grid.setStructure(itemData.layout); //
setting physical structure
grid.setStore(dataStore); //
setting the data
},
error : function(response, ioArgs) {
console.error("HTTP status code: ", ioArgs.xhr.status);
return response;
}
});
2) the jsp page:-
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@taglib prefix="struts" uri="/struts-tags"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page import="java.util.*"%>
<html>
<head>
<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"%>" />
<script type="text/javascript">
dojo.require("dijit.form.DateTextBox");
dojo.require("dijit.Dialog");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileWriteStore");
</script>
</head>
<body class="tundra landing" >
<table id="quePaper_table">
<div id="billsGrid" dojoType="dojox.grid.DataGrid" escapeHTMLInData="false" >
// using this id i will be inserting data in js
</div>
</body>
</html>
3) back end servlet(this servlet will return the json that will be later assigned to the grid in js file)
InputStream convertToJson(ArrayList<StudentScores> studentResultList) {
final String methodName = "convertToJson";
log.entering(methodName);
Iterator<StudentResultScores> it = studentResultList.iterator();
// here we are constructing the layout that means the table structure example
userid name total
345 krish 100
JSONObject dataObject = new JSONObject();
JSONObject layoutObject1 = new JSONObject();
layoutObject1.put("field","userId");
layoutObject1.put("name","UserId");
layoutObject1.put("width","auto")
;//the grid will expand automatically
JSONObject layoutObject2 = new JSONObject();
layoutObject2.put("field","name");
layoutObject2.put("name","Name");
layoutObject2.put("width","auto");
JSONObject layoutObject3 = new JSONObject();
layoutObject3.put("field","total");
layoutObject3.put("name","Total");
layoutObject3.put("width","auto");
JSONArray layoutArray = new JSONArray();
layoutArray.add(layoutObject1);
layoutArray.add(layoutObject2);
layoutArray.add(layoutObject3);
// here we are constructiong the data inside grid
JSONArray dataArray = new JSONArray();
JSONObject innerDataObject=null;
int i=0;
while(it.hasNext()){
StudentResultScores s = it.next();
innerDataObject=new JSONObject();
String a="<a href='javascript:getUserAnswerSheet(";
String b=")'><u>";
String c="</u></a>";
innerDataObject.put("userId",a+s.getUserId()+b+s.getUserId()+c);
log.info("userId"+s.getUserId());
innerDataObject.put("name", s.getName());
log.info("name"+s.getName());
innerDataObject.put("total", s.getTotalScore());
log.info("total"+s.getTotalScore());
TreeMap<String, Integer> scoreMap =s.getCategoryScoreMap();
Set<String> keys= scoreMap.keySet();
log.info("categories"+scoreMap.values());
//Collection<Integer> g=scoreMap.values();
Iterator<String> itt = keys.iterator();
while(itt.hasNext()){
String x=itt.next();
if(i==0){
JSONObject layoutObject = new JSONObject();/
/dyanamic layout consrtuction
layoutObject.put("field",x);
layoutObject.put("name",x);
layoutObject.put("width","auto");
layoutArray.add(layoutObject);
}
innerDataObject.put(x,s.getCategoryScoreMap().get(x));
}
i++;
dataArray.add(innerDataObject);
}
dataObject.put("items", dataArray);
//the content data
dataObject.put("identifier","userId");
// unique id to identify
dataObject.put("layout",layoutArray);//
the layout data
inputStream = new StringBufferInputStream(dataObject.toString());
return inputStream;
}
