jQWidgets Forums

Tagged: data adapter, dataadapter, datafields, grid, jqxDataAdapter, jqxgrid, nested, nested grids

This topic contains 3 replies, has 2 voices, and was last updated by JOlmos 10 years, 3 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Nested Grid not Loading Data Posts
January 14, 2015 at 11:19 pm Nested Grid not Loading Data #65390

JOlmos
Participant

Hello,

I am having a hard time getting the nestedGrid to work. I copied and paste the example that was provided and the only thing I’ve changed is the name of the fields to what I need. For some reason the grid is displaying no data when I run it. I cannot figure out what I am doing wrong. I can see the adapters loading the data from my DB fine when I use debugging, but when it gets to the part “var initrowdetails = function (index,…”, I cannot see what happens after that and nothing gets loaded into the grid. Here is my code; please help me:

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>Kanban Management</title>
<link rel=”stylesheet” href=”Styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”Scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”Scripts/jqxcore.js”></script>
<script type=”text/javascript” src=”Scripts/jqxdata.js”></script>
<script type=”text/javascript” src=”Scripts/jqxbuttons.js”></script>
<script type=”text/javascript” src=”Scripts/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”Scripts/jqxmenu.js”></script>
<script type=”text/javascript” src=”Scripts/jqxgrid.js”></script>
<script type=”text/javascript” src=”Scripts/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”Scripts/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”Scripts/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”Scripts/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
//Load the item adapter
var source = {
datafields: [
{ name: ‘KanbanItemID’, type: ‘integer’ },
{ name: ‘DateAdded’, type: ‘date’ },
{ name: ‘Item’, type: ‘string’ },
{ name: ‘BinMinQuantity’, type: ‘integer’ },
{ name: ‘MaxCards’, type: ‘integer’ },
{ name: ‘MinCards’, type: ‘integer’ },
{ name: ‘PackQuantity’, type: ‘integer’ }
],
datatype: “xml”,
async: false,
record: ‘Table’,
id: ‘KanbanItemID’,
url: ‘Kanban.aspx/GetKanbanItems’
};
var itemsDataAdapter = new $.jqx.dataAdapter(source,
{ contentType: ‘application/json; charset=utf-8′, autoBind: true });

var cardsSource = {
dataFields: [
{ name: ‘KanbanCardID’, type: ‘integer’ },
{ name: ‘CardNumber’, type: ‘short’ },
{ name: ‘KanbanItemID’, type: ‘integer’ },
{ name: ‘KanbanCardStatusID’, type: ‘integer’ },
{ name: ‘KanbanCardStatus’, type: ‘string’ },
{ name: ‘CreatedBy’, type: ‘string’ },
{ name: ‘DateCreated’, type: ‘date’ },
{ name: ‘IsOneTime’, type: ‘integer’ },
{ name: ‘CurrentLocation’, type: ‘string’ }
],
datatype: “xml”,
async: false,
record: ‘Table1′,
//id: “KanbanCardID”,
url: ‘Kanban.aspx/GetCards’
};
var cardsDataAdapter = new $.jqx.dataAdapter(cardsSource,
{ contentType: ‘application/json; charset=utf-8′, autoBind: true });

cards = cardsDataAdapter.records;

//—-This is where starts failing. At this point I can see all of the data in the adapters.

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 cards depending on the id.
var cardsbyid = [];
for (var m = 0; m < cards.length; m++) {
var result = filter.evaluate(cards[m][“KanbanItemID”]);
if (result)
cardsbyid.push(cards[m]);
}
var cardssource = {
datafields: [
{ name: ‘KanbanCardID’, type: ‘integer’ },
{ name: ‘CardNumber’, type: ‘short’ },
{ name: ‘KanbanItemID’, type: ‘integer’ },
{ name: ‘KanbanCardStatusID’, type: ‘integer’ },
{ name: ‘KanbanCardStatus’, type: ‘string’ },
{ name: ‘CreatedBy’, type: ‘string’ },
{ name: ‘DateCreated’, type: ‘date’ },
{ name: ‘IsOneTime’, type: ‘integer’ },
{ name: ‘CurrentLocation’, type: ‘string’ }
],
id: ‘KanbanCardID’,
localdata: cardsbyid
}
var nestedGridAdapter = new $.jqx.dataAdapter(cardssource);
if (grid != null) {
grid.jqxGrid({
source: nestedGridAdapter, width: 780, height: 200,
columns: [
{ text: ‘KanbanCardID’, datafield: ‘KanbanCardID’, width: 100 },
{ text: ‘CardNumber’, datafield: ‘CardNumber’, width: 150 },
{ text: ‘KanbanItemID’, datafield: ‘KanbanItemID’, width: 150 },
{ text: ‘KanbanCardStatus’, datafield: ‘KanbanCardStatus’, width: 150 },
{ text: ‘CreatedBy’, datafield: ‘CreatedBy’, width: 150 },
{ text: ‘DateCreated’, dataField: ‘DateCreated’, cellsformat: ‘d’, width: 150 },
{ text: ‘IsOneTime’, dataField: ‘IsOneTime’, cellsformat: ‘d’, width: 150 },
{ text: ‘CurrentLocation’, datafield: ‘CurrentLocation’ }
]
});
}
}
$(“#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, rowdetailshidden: true },
ready: function () {
$(“#jqxgrid”).jqxGrid(‘showrowdetails’, 1);
},
columns: [
{ text: ‘KID’, dataField: ‘KanbanItemID’, width: 50 },
{ text: ‘Item’, dataField: ‘Item’, width: 150 },
{ text: ‘DateAdded’, dataField: ‘DateAdded’, cellsformat: ‘d’, width: 150 },
{ text: ‘BinMin’, dataField: ‘BinMinQuantity’, width: 60 },
{ text: ‘Max’, dataField: ‘MaxCards’, width: 50 },
{ text: ‘Min’, dataField: ‘MinCards’, width: 50 },
{ text: ‘PackQty’, dataField: ‘PackQuantity’, width: 60 }
]
});
});
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div id=”jqxgrid”></div>
</form>
</body>
</html>

January 14, 2015 at 11:56 pm Nested Grid not Loading Data #65392

JOlmos
Participant

After my first post I noticed that I was missing the renderer, but still not working after I added it. Here is the updated code:

<!DOCTYPE html>

<html xmlns=”http://www.w3.org/1999/xhtml”>
<head runat=”server”>
<title>Kanban Management</title>
<link rel=”stylesheet” href=”Styles/jqx.base.css” type=”text/css” />
<script type=”text/javascript” src=”Scripts/jquery-1.11.1.min.js”></script>
<script type=”text/javascript” src=”Scripts/jqxcore.js”></script>
<script type=”text/javascript” src=”Scripts/jqxdata.js”></script>
<script type=”text/javascript” src=”Scripts/jqxbuttons.js”></script>
<script type=”text/javascript” src=”Scripts/jqxscrollbar.js”></script>
<script type=”text/javascript” src=”Scripts/jqxmenu.js”></script>
<script type=”text/javascript” src=”Scripts/jqxgrid.js”></script>
<script type=”text/javascript” src=”Scripts/jqxgrid.selection.js”></script>
<script type=”text/javascript” src=”Scripts/jqxgrid.filter.js”></script>
<script type=”text/javascript” src=”Scripts/jqxgrid.sort.js”></script>
<script type=”text/javascript” src=”Scripts/demos.js”></script>
<script type=”text/javascript”>
$(document).ready(function () {
//Load the item adapter
var source = {
datafields: [
{ name: ‘KanbanItemID’, type: ‘integer’ },
{ name: ‘DateAdded’, type: ‘date’ },
{ name: ‘Item’, type: ‘string’ },
{ name: ‘BinMinQuantity’, type: ‘integer’ },
{ name: ‘MaxCards’, type: ‘integer’ },
{ name: ‘MinCards’, type: ‘integer’ },
{ name: ‘PackQuantity’, type: ‘integer’ }
],
datatype: “xml”,
async: false,
record: ‘Table’,
id: ‘KanbanItemID’,
url: ‘Kanban.aspx/GetKanbanItems’
};
var itemsDataAdapter = new $.jqx.dataAdapter(source,
{ contentType: ‘application/json; charset=utf-8’, autoBind: true });

var cardsSource = {
dataFields: [
{ name: ‘KanbanCardID’, type: ‘integer’ },
{ name: ‘CardNumber’, type: ‘short’ },
{ name: ‘KanbanItemID’, type: ‘integer’ },
{ name: ‘KanbanCardStatusID’, type: ‘integer’ },
{ name: ‘KanbanCardStatus’, type: ‘string’ },
{ name: ‘CreatedBy’, type: ‘string’ },
{ name: ‘DateCreated’, type: ‘date’ },
{ name: ‘IsOneTime’, type: ‘integer’ },
{ name: ‘CurrentLocation’, type: ‘string’ }
],
datatype: “xml”,
async: false,
record: ‘Table1’,
//id: “KanbanCardID”,
url: ‘Kanban.aspx/GetCards’
};
var cardsDataAdapter = new $.jqx.dataAdapter(cardsSource,
{ contentType: ‘application/json; charset=utf-8’, autoBind: true });

cards = cardsDataAdapter.records;

//—-This is where starts failing. At this point I can see all of the data in the adapters.

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 cards depending on the id.
var cardsbyid = [];
for (var m = 0; m < cards.length; m++) {
var result = filter.evaluate(cards[m][“KanbanItemID”]);
if (result)
cardsbyid.push(cards[m]);
}
var cardssource = {
datafields: [
{ name: ‘KanbanCardID’, type: ‘integer’ },
{ name: ‘CardNumber’, type: ‘short’ },
{ name: ‘KanbanItemID’, type: ‘integer’ },
{ name: ‘KanbanCardStatusID’, type: ‘integer’ },
{ name: ‘KanbanCardStatus’, type: ‘string’ },
{ name: ‘CreatedBy’, type: ‘string’ },
{ name: ‘DateCreated’, type: ‘date’ },
{ name: ‘IsOneTime’, type: ‘integer’ },
{ name: ‘CurrentLocation’, type: ‘string’ }
],
id: ‘KanbanCardID’,
localdata: cardsbyid
}
var nestedGridAdapter = new $.jqx.dataAdapter(cardssource);
if (grid != null) {
grid.jqxGrid({
source: nestedGridAdapter, width: 780, height: 200,
columns: [
{ text: ‘KanbanCardID’, datafield: ‘KanbanCardID’, width: 100 },
{ text: ‘CardNumber’, datafield: ‘CardNumber’, width: 150 },
{ text: ‘KanbanItemID’, datafield: ‘KanbanItemID’, width: 150 },
{ text: ‘KanbanCardStatus’, datafield: ‘KanbanCardStatus’, width: 150 },
{ text: ‘CreatedBy’, datafield: ‘CreatedBy’, width: 150 },
{ text: ‘DateCreated’, dataField: ‘DateCreated’, cellsformat: ‘d’, width: 150 },
{ text: ‘IsOneTime’, dataField: ‘IsOneTime’, cellsformat: ‘d’, width: 150 },
{ text: ‘CurrentLocation’, datafield: ‘CurrentLocation’ }
]
});
}
}

var renderer = function (row, column, value) {
return ‘<span style=”margin-left: 4px; margin-top: 9px; float: left;”>’ + value + ‘</span>’;
}

$(“#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, rowdetailshidden: true },
ready: function () {
$(“#jqxgrid”).jqxGrid(‘showrowdetails’, 1);
},
columns: [
{ text: ‘KID’, dataField: ‘KanbanItemID’, width: 50, cellsrenderer: renderer },
{ text: ‘Item’, dataField: ‘Item’, width: 150, cellsrenderer: renderer },
{ text: ‘DateAdded’, dataField: ‘DateAdded’, cellsformat: ‘d’, width: 150, cellsrenderer: renderer },
{ text: ‘BinMin’, dataField: ‘BinMinQuantity’, width: 60, cellsrenderer: renderer },
{ text: ‘Max’, dataField: ‘MaxCards’, width: 50, cellsrenderer: renderer },
{ text: ‘Min’, dataField: ‘MinCards’, width: 50, cellsrenderer: renderer },
{ text: ‘PackQty’, dataField: ‘PackQuantity’, width: 60, cellsrenderer: renderer }
]
});
});
</script>
</head>
<body class=’default’>
<form id=”form1″ runat=”server”>
<div id=”jqxgrid”></div>
</form>
</body>
</html>

January 15, 2015 at 7:09 am Nested Grid not Loading Data #65408

Dimitar
Participant

Hello JOlmos,

The source of your parent grid has to be set to a data adapter instance, i.e. itemsDataAdapter. Other than that I can see no obvious mistakes. If this does not fix the issue, please share if there are any errors thrown in your browser console or if the code breaks on a particular line (when debugging).

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

January 15, 2015 at 7:06 pm Nested Grid not Loading Data #65466

JOlmos
Participant

Dimitar,

That was it!

Thank you for your help.
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.