jQuery UI Widgets Forums Grid Nested Grid not Loading Data

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • 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>

    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>

    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/

    Nested Grid not Loading Data #65466

    JOlmos
    Participant

    Dimitar,

    That was it!

    Thank you for your help.

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

You must be logged in to reply to this topic.