I have a table that A is made from dojo and I need to populate another table B again using dojo. Here I need to click the row of the table A and based on that row I need to make a call to my spring controller along with I will send the row id or some value of row to controller and the controller, it should return json data of a model that i need to return to dojo to so it as table B.
Here below I show you that what I have.
Button to populate a table that which I got In google search.
<button data-dojo-type="dijit/form/Button" type="button" id="goBtn" disabled="disabled" >GO
<script type="dojo/method" data-dojo-event="onClick" data-dojo-args="evt">
populateTable();
</script>
This is the table A that going to populated on button click
<div style="width: 800px; height: 200px;">
<div data-dojo-type="dojo/store/Memory" data-dojo-props="data:storeDataForTableA, idProperty:'tableAid'" data-dojo-id="tableADateStore">
</div>
<!-- Create the model bridging the store and the Tree -->
<div data-dojo-type="dojo/data/ObjectStore" data-dojo-id="tableADateStoreForGrid"
data-dojo-props="objectStore: tableADateStore"></div>
<div id="grid"
data-dojo-type="dojox/grid/DataGrid"
data-dojo-props="store:tableADateStoreForGrid,
structure:'layoutGridForTableA',
queryOptions:{deep:true},
query:{},
onRowClick: function(e) {
populateTableB();
},
rowsPerPage:5">
</div>
</div>
This the table B that is to be populated on row click of above table, that is Table A
<div style="width: 800px; height: 200px;" class="left-div">
<div data-dojo-type="dojo/store/Memory" data-dojo-props="data:storeDataForTableB, idProperty:'tableBid'" data-dojo-id="tableBDateStore">
</div>
<!-- Create the model bridging the store and the Tree -->
<div data-dojo-type="dojo/data/ObjectStore" data-dojo-id="tableBDateStoreForGrid"
data-dojo-props="objectStore: tableBDateStore"></div>
<div id="dateGrid"
data-dojo-type="dojox/grid/DataGrid"
data-dojo-props="store:tableBDateStoreForGrid,
structure:'layoutGridForTableB',
queryOptions:{deep:true},
query:{},
rowsPerPage:5">
</div>
</div>
And below is the dojo script i used
<script>
require(["dojo/parser", "dijit/form/FilteringSelect", "dijit/form/Button", "dojox/data/HtmlTableStore", "dojox/grid/DataGrid"]);
require(["dojo/store/Memory", "dojo/data/ObjectStore", "dojox/grid/DataGrid", "dojo/_base/lang", "dojox/grid/DataGrid",
"dojo/data/ItemFileWriteStore", "dojox/grid/cells/dijit", "dojox/grid/cells/CheckBox", "dojo/dom", "dojo/domReady!"], function () {
layoutGridForTableA = [[
{ field: "nm", name: "Name", width: 'auto' },
{ field: "Cod", name: "Code", width: 'auto' },
{ field: "startDt", name: "Start Date", width: 'auto' },
{ field: "endDt", name: "End Date", width: 'auto' }
]];
layoutGridForTableB = [[
{ field: "day", name: "Day", width: 'auto' },
{ field: "description", name: "Description", width: 'auto' },
{ field: "event", name: "Event", width: 'auto' },
{ field: "checkBoxTest", name: "Check Box Test", width: 'auto', editable: true, type: dojox.grid.cells.Bool, formatter:formatCell, styles: 'text-align: center;' },
{ field: "", name: "", width: 'auto', formatter:editButton}
]];
storeDataForTableA = [];
storeDataForTableB = [];
var formatCell = function(){
var checked = val? 'checked="checked";' : '<input type="checbox"' +checked+'disabled="disabled"/>';
return checked;
};
function editButton(){
return "<button onclick=\"\" class=\"editbuttonicon\"></button>";
}
});
function populateTableA(){
var addItemToTableA = { name:'Steve', Cod:'007', startDt:'any date', endDt:'any date'};
for (var i=0;i<4;i++)
{
tableADateStoreForGrid.newItem(addItemToTableA );
}
}
function populateTableB(){
var addItemToTableA = { name:'Steve', Cod:'007', startDt:'any date', endDt:'any date'};
for (var i=0;i<4;i++)
{
tableBDateStoreForGrid.newItem(addItemToTableA );
}
}
</script>
In the above script one can find that I did not populated the table B because here is the problem there to write it. I got some script in internet that do ajax request to send and receive JSON data. But there is no explanation for URL. I tried same name that which is in request mapped. But it did not call the request. I will past the script that I used.
dojo.ready(function(){
dojo.xhrGet({
url : "populateFromSpring",
handleAs: "json",
load: function(Beans) {
//I need to get the Beans object here and populate the Table B
alert("hi");
},
error: function(err) {
alert("err: "+err);
}
});
});
I tried this inside function populateTableB instead of the for loop , which is inside the script one can notice it.
Below I give you the spring controller
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import com.model.TableBBean;
@Controller
@RequestMapping("/populateFromSpring")
public class PopulateFromSpringCtrl {
@RequestMapping(method = RequestMethod.POST)
public @ResponseBody List<TableBBean> tableBmth(@RequestParam String name) {
// ModelAndView mv = new ModelAndView("loginsuccess");
List<TableBBean> Beans = new ArrayList<TableBBean>();
TableBBean B1 = new TableBBean();
B1.setDay(1);
B1.setDescription("Desc 1");
B1.setEvent("GS");
B1.setCheckBox("0");
TableBBean B2 = new TableBBean();
B2.setDay(2);
B2.setDescription("Desc 2");
B2.setEvent("GS");
B2.setCheckBox("1");
TableBBean B3 = new TableBBean();
B3.setDay(3);
B3.setDescription("Desc 3");
B3.setEvent("GS");
B3.setCheckBox("1");
Beans.add(B1);
Beans.add(B2);
Beans.add(B3);
//mv.addObject("Beans",Beans);
return Beans;
}
}
I know this controller is not fully completed and I need help in completing this controller and converting the bean to JSON.
So the things what I need is
dojo should call this controller and send some data say for example id of table A's row to it, then it should get back the data as JSON and populate the table B.
