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;
}
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;
}
could you please let us know how to send the grid data from jsp to spring servlet.
ReplyDeleteYou should pull the json object and send it to servlet
ReplyDeletepls how can send json data in dojo datagrid with example
ReplyDelete