Hi I am getting a error while again selecting the drop down in DOJO
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"
%>
<!DOCTYPE html>
<html>
<head>
<script>
function onReportTypesSelect()
{
if(getDijitValue('data_types') != 'Select')
{
if(getDijitValue('data_types') == 'class_level')
{
require([
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/store/Cache",
"dojox/grid/DataGrid",
"dojo/data/ObjectStore",
"dojo/query",
"dojo/domReady!"
], function(JsonRest, Memory, Cache, DataGrid, ObjectStore, query){
var userStore, dataStore, grid;
userStore = new Cache(JsonRest({target: "<%=request.getContextPath()%>" + "/data/classServlet"}), new Memory());
grid = new DataGrid({
id:"class_level_grid",
store: dataStore = new ObjectStore({objectStore: userStore}),
structure: [
{name: 'Roll Number', field: 'roll', width: 'auto', defaultValue: ""},
{name: 'Name', field: 'name', width: '100px', defaultValue: ""},
{name: 'Class', field: 'class', width: '75px', defaultValue: ""}
],
style:"font-family: calibri, Garamond, Comic Sans; font-size: 10;",
selectionMode:'single',
autoHeight: 10,
rowsPerPage:40,
rowSelector:'20px',
selectable: true
}
, "class_level_grid_div"); // make sure you have a target HTML element with this id
grid.startup();
});
}
if(getDijitValue('data_types') == 'class_level2')
{
require([
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/store/Cache",
"dojox/grid/DataGrid",
"dojo/data/ObjectStore",
"dojo/query",
"dojo/domReady!"
], function(JsonRest, Memory, Cache, DataGrid, ObjectStore, query){
var userStore, dataStore, grid;
userStore = new Cache(JsonRest({target: "<%=request.getContextPath()%>" + "/data/class2Servlet"}), new Memory());
grid = new DataGrid({
id:"class_level2_grid",
store: dataStore = new ObjectStore({objectStore: userStore}),
structure: [
{name: 'Roll Number', field: 'roll', width: 'auto', defaultValue: ""},
{name: 'Name', field: 'name', width: '100px', defaultValue: ""},
{name: 'Class', field: 'class', width: '75px', defaultValue: ""}
],
style:"font-family: calibri, Garamond, Comic Sans; font-size: 10;",
selectionMode:'single',
autoHeight: 10,
rowsPerPage:40,
rowSelector:'20px',
selectable: true
}
, "class_level2_grid_div"); // make sure you have a target HTML element with this id
grid.startup();
});
}
}
}
</script>
</head>`enter code here`
<body>
<div id="data_types" data-dojo-type="dijit/form/Select" style="width: 200px;" onchange="onReportTypesSelect()">
<span data-dojo-value="Select"><b>Select</b></span>
<span data-dojo-value="class_level"><b>class Level</b></span>
<span data-dojo-value="class_level2"><b>class Level</b></span>
</div>
<div id="class_level_grid_div" style="width: 95%; height: 90%;"> </div>
</div>
<div id="class_level2_grid_div" style="width: 95%; height: 90%;"> </div>
</div>
</body>
</html>
Error is coming as Error: Tried to register widget with id==class_level_grid but that id is already registered. when again selecting the drop down kindly help me.
you can't populate grid above another grid without destroying the first one that you created.
so if you have grid with id=MyGrid placed at a div this div will be removed and the grid will replace it.
so you have to use two methods the placeAt and the grid.destroyRecursive(true);
the code below should work fine.
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"
%>
<!DOCTYPE html>
<html>
<head>
<script>
function onReportTypesSelect()
{
if(getDijitValue('data_types') != 'Select')
{
if(getDijitValue('data_types') == 'class_level')
{
require([
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/store/Cache",
"dojox/grid/DataGrid",
"dojo/data/ObjectStore",
"dojo/query",
"dijit/registry",
"dojo/domReady!"
], function(JsonRest, Memory, Cache, DataGrid, ObjectStore, query,registry){
//we are checking here if the grid with that ID already exists and if yes destroy it
if(typeof registry.byId("class_level_grid_div") != "undefined"){
registry.byId("class_level_grid_div").destroyRecursive();
}
var userStore, dataStore, grid;
userStore = new Cache(JsonRest({target: "<%=request.getContextPath()%>" + "/data/classServlet"}), new Memory());
grid = new DataGrid({
id:"class_level_grid",
store: dataStore = new ObjectStore({objectStore: userStore}),
structure: [
{name: 'Roll Number', field: 'roll', width: 'auto', defaultValue: ""},
{name: 'Name', field: 'name', width: '100px', defaultValue: ""},
{name: 'Class', field: 'class', width: '75px', defaultValue: ""}
],
style:"font-family: calibri, Garamond, Comic Sans; font-size: 10;",
selectionMode:'single',
autoHeight: 10,
rowsPerPage:40,
rowSelector:'20px',
selectable: true
}).placeAt("class_level_grid_div"); // use the placeAt so you don't replace the dom
grid.startup();
});
}
if(getDijitValue('data_types') == 'class_level2')
{
require([
"dojo/store/JsonRest",
"dojo/store/Memory",
"dojo/store/Cache",
"dojox/grid/DataGrid",
"dojo/data/ObjectStore",
"dojo/query",
"dijit/registry",
"dojo/domReady!"
], function(JsonRest, Memory, Cache, DataGrid, ObjectStore, query,registry){
var userStore, dataStore, grid;
if(typeof registry.byId("class_level2_grid_div") != "undefined"){
registry.byId("class_level2_grid_div").destroyRecursive();
}
userStore = new Cache(JsonRest({target: "<%=request.getContextPath()%>" + "/data/class2Servlet"}), new Memory());
grid = new DataGrid({
id:"class_level2_grid",
store: dataStore = new ObjectStore({objectStore: userStore}),
structure: [
{name: 'Roll Number', field: 'roll', width: 'auto', defaultValue: ""},
{name: 'Name', field: 'name', width: '100px', defaultValue: ""},
{name: 'Class', field: 'class', width: '75px', defaultValue: ""}
],
style:"font-family: calibri, Garamond, Comic Sans; font-size: 10;",
selectionMode:'single',
autoHeight: 10,
rowsPerPage:40,
rowSelector:'20px',
selectable: true
}).placeAt("class_level2_grid_div"); // make sure you have a target HTML element with this id
grid.startup();
});
}
}
}
</script>
</head>`enter code here`
<body>
<div id="data_types" data-dojo-type="dijit/form/Select" style="width: 200px;" onchange="onReportTypesSelect()">
<span data-dojo-value="Select"><b>Select</b></span>
<span data-dojo-value="class_level"><b>class Level</b></span>
<span data-dojo-value="class_level2"><b>class Level</b></span>
</div>
<div id="class_level_grid_div" style="width: 95%; height: 90%;"> </div>
</div>
<div id="class_level2_grid_div" style="width: 95%; height: 90%;"> </div>
</div>
</body>
</html>