jQWidgets Forums
Forum Replies Created
-
hello,
I am using this grid example but how do I use the “root” and “record” type I am confused. Please help me. I have edited this code in my project which is like this. Please look at it. I am getting the parent values but not getting the nested grid values. Please help me where am I wrong.`<!DOCTYPE html>
<html>
<head>
<meta name=”viewport” content=”width=device-width” />
<title>NestedGrid</title>
<link rel=”stylesheet” href=”~/Scripts/jqwidgets/styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”~/Scripts/jquery-1.10.2.min.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxcore.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxdata.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxbuttons.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxmenu.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxgrid.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”~/Scripts/jqwidgets/jqxgrid.sort.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
var url = “/Merchant1/GetRequestTypeList”;var source =
{
datafields: [
{ name: ‘RequestTypeId’ },
{ name: ‘RequestTypeName’ },],
//root: “Employees”,
//record: “Employee”,
id: ‘RequestTypeId’,
datatype: “json”,
async: false,
url: url
};var employeesAdapter = new $.jqx.dataAdapter(source);
var orderdetailsurl = “/Merchant1/GetRequestDetailList”;
var ordersSource =
{
datafields: [
{ name: ‘RequestTypeId’, type: ‘integer’ },
{ name: ‘RequestDetailName’, type: ‘string’ },
{ name: ‘RequestDetailId’, type: ‘integer’ },
],
root: “Orders”,
record: “Order”,
datatype: “json”,
url: orderdetailsurl,
async: false
};var ordersDataAdapter = new $.jqx.dataAdapter(ordersSource, { autoBind: true });
orders = ordersDataAdapter.records;
var nestedGrids = new Array();// create nested grid.
var initrowdetails = function (index, parentElement, gridElement, record) {
var id = record.uid.toString();
var grid = $($(parentElement).children()[0]);
nestedGrids[index] = grid;
var filtergroup = new $.jqx.filter();
var filter_or_operator = 1;
var filtervalue = id;
var filtercondition = ‘equal’;
var filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// fill the orders depending on the id.
var ordersbyid = [];
for (var m = 0; m < orders.length; m++) {
var result = filter.evaluate(orders[m][“RequestTypeId”]);
if (result)
ordersbyid.push(orders[m]);
}var orderssource = { datafields: [
{ name: ‘RequestTypeId’, type: ‘integer’ },
{ name: ‘RequestDetailName’, type: ‘string’ },
{ name: ‘RequestDetailId’, type: ‘integer’ }],
id: ‘RequestTypeId’,
localdata: ordersbyid
}
var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);if (grid != null) {
grid.jqxGrid({
source: nestedGridAdapter, width: 780, height: 200,
columns: [
{ text: ‘RequestDetailId’, datafield: ‘Request Detail Id’, width: 200 },
{ text: ‘RequestDetailName’, datafield: ‘Request Detail Name’, width: 200 },]
});
}
}var photorenderer = function (row, column, value) {
var name = $(‘#jqxgrid’).jqxGrid(‘getrowdata’, row).FirstName;
var imgurl = ‘../../images/’ + name.toLowerCase() + ‘.png’;
var img = ‘<div style=”background: white;”></div>’;
return img;
}var renderer = function (row, column, value) {
return ‘<span style=”margin-left: 4px; margin-top: 9px; float: left;”>’ + value + ‘</span>’;
}// creage jqxgrid
$(“#jqxgrid”).jqxGrid(
{
width: 850,
height: 365,
source: source,
rowdetails: true,
rowsheight: 35,
initrowdetails: initrowdetails,
rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220},
ready: function () {
$(“#jqxgrid”).jqxGrid(‘showrowdetails’, 1);
},
columns: [
{ text: ‘RequestTypeId’, datafield: ‘RequestTypeId’, width: 150 },
{ text: ‘RequestTypeName’, datafield: ‘RequestTypeName’, width: 150, cellsrenderer: renderer },]
});
});
</script>
</head>
<body class=’default’>
<div id=”jqxgrid”>
</div>
</body>
</html>