jQuery UI Widgets Forums Grid Nested Grids with different child grid for each parent row

This topic contains 5 replies, has 5 voices, and was last updated by  Hristo 5 years, 7 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • sun21170
    Participant

    Sunil

    I had a look at the nested grids sample at: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/nestedgrids.htm.

    My question is: Can I have a different schema for the nested grid for each parent row?

    All parent rows will have the same schema i.e. columns, but the child grid columns will differ from one parent row to another.

    Thanks
    Sunil


    Dimitar
    Participant

    Hello Sunil,

    This can be achieved. In initrowdetails you can check the parent row’s index and initialize the nested grid according to your specifications. Here is an example (based on the aforementioned demo) that might be of help:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <link rel="stylesheet" href="../../jqwidgets/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="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.filter.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                var url = "../sampledata/employees.xml";
    
                var source =
                {
                    datafields: [
                        { name: 'FirstName' },
                        { name: 'LastName' },
                        { name: 'Title' },
                        { name: 'Address' },
                        { name: 'City' }
                    ],
                    root: "Employees",
                    record: "Employee",
                    id: 'EmployeeID',
                    datatype: "xml",
                    async: false,
                    url: url
                };
    
                var employeesAdapter = new $.jqx.dataAdapter(source);
    
                var orderdetailsurl = "../sampledata/orderdetails.xml";
    
                var ordersSource =
                {
                    datafields: [
                        { name: 'EmployeeID', type: 'string' },
                        { name: 'ShipName', type: 'string' },
                        { name: 'ShipAddress', type: 'string' },
                        { name: 'ShipCity', type: 'string' },
                        { name: 'ShipCountry', type: 'string' },
                        { name: 'ShippedDate', type: 'date' }
                    ],
                    root: "Orders",
                    record: "Order",
                    datatype: "xml",
                    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]["EmployeeID"]);
                        if (result)
                            ordersbyid.push(orders[m]);
                    }
    
                    var orderssource = { datafields: [
                        { name: 'EmployeeID', type: 'string' },
                        { name: 'ShipName', type: 'string' },
                        { name: 'ShipAddress', type: 'string' },
                        { name: 'ShipCity', type: 'string' },
                        { name: 'ShipCountry', type: 'string' },
                        { name: 'ShippedDate', type: 'date' }
                    ],
                        id: 'OrderID',
                        localdata: ordersbyid
                    }
                    var nestedGridAdapter = new $.jqx.dataAdapter(orderssource);
    
                    if (grid != null) {
                        if (index === 0) {
                            grid.jqxGrid({
                                source: nestedGridAdapter, width: 780, height: 200,
                                columns: [
                                  { text: 'Ship Name', datafield: 'ShipName', width: 200 },
                                  { text: 'Ship Address', datafield: 'ShipAddress' }
                               ]
                            });
                        } else {
                            grid.jqxGrid({
                                source: nestedGridAdapter, width: 780, height: 200,
                                columns: [
                                  { text: 'Ship City', datafield: 'ShipCity', width: 150 },
                                  { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
                                  { text: 'Shipped Date', datafield: 'ShippedDate' }
                               ]
                            });
                        }
                    }
                }
    
                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;"><img style="margin:2px; margin-left: 10px;" width="32" height="32" src="' + imgurl + '"></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: 600,
                    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', 0);
                        $("#jqxgrid").jqxGrid('showrowdetails', 1);
                    },
                    columns: [
                          { text: 'Photo', width: 50, cellsrenderer: photorenderer },
                          { text: 'First Name', datafield: 'FirstName', width: 100, cellsrenderer: renderer },
                          { text: 'Last Name', datafield: 'LastName', width: 100, cellsrenderer: renderer },
                          { text: 'Title', datafield: 'Title', width: 180, cellsrenderer: renderer },
                          { text: 'Address', datafield: 'Address', width: 300, cellsrenderer: renderer },
                          { text: 'City', datafield: 'City', width: 170, cellsrenderer: renderer }
                      ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <div id="jqxgrid">
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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


    sara
    Participant

    Team,

    We have nested grid with different data source for each parent grid row. We are trying to expand all the rows once parent and all the child tables are rendered. We have tried using ready and rendered (from the sample code) events in the parent row to expand rows but blank row detail displayed. On analysis found that the ready/rendered event for parent grid is triggered before the completion of initrowdetails callback.

    How to expand all rows? What should be the approach?


    Dimitar
    Participant

    Hello sara,

    initrowdetails is called the first time each parent row is expanded, not automatically. In it, the nested content of rows is initialized. You can show all nested tables by calling the method showrowdetails for each row (possibly in the grid’s ready callback function).

    Best Regards,
    Dimitar

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


    kayceegan
    Participant

    Hi Team,

    I need your help. I have a nested grid on a grid, then a nested grid on a nested grid. I am using different dataAdapters on these grids. First grid is loading fine, when row is clicked nested grid (initrowdetails) will show and it loads fine, but when I click the nested grid for the other nested grid to show, it just keeps on loading and looping on my initrowdetails2. Please help. Here is my code.

    Note that dataTable_UsageByAgent() & dataTable_UsageByTeam() are located on a different cshtml file and returns a dataadapter.

    Hope to hear from you as soon as possible.

    var urlGridResults = ‘@Url.Content(“~/”)’ + ‘QBotReporting/GridResults’;
    var dateRange = $(‘#jqxDtiDateRange’).val().split(” – “);
    var report_name = $(“#jqxDdlReportName”).val();

    function dataTable_UsageBySite() {
    var source = {
    datatype: “json”,
    datafields: [
    { name: ‘Site’, type: ‘string’ },
    { name: ‘ConversationCount’, type: ‘string’ }
    ],
    id: null,
    url: urlGridResults,
    data: {
    startDate: dateRange[0],
    endDate: dateRange[1],
    reportName: report_name
    },
    root: ‘Rows’
    }

    var dataAdapter = new $.jqx.dataAdapter(source, {
    loadComplete: function () {
    if (dataAdapter.records.length == 0) {
    $(“#errorMessage”).text(“No data found!”);
    $(“#gridUsageBySite”).hide();
    $(“#GridToolbars”).hide();
    }
    else {
    $(“#errorMessage”).text(“”);
    $(“#gridUsageBySite”).show();
    $(“#GridToolbars”).show();
    }
    },

    loadError: function (xhr, status, error) {
    $(“#gridUsageBySite”).hide();
    $(“#errorMessage”).text(error);
    }
    });
    return dataAdapter;

    }

    var initrowdetails2 = function (index, parentElement, gridElement, record) {
    //var gridAgent = $($(parentElement).children()[0]);
    var gridAgent = $($.find(‘#subgrid’ + index))
    debugger;
    if (gridAgent != null) {
    gridAgent.jqxGrid({
    source: dataTable_UsageByAgent(), width: 850, height: 200, enabletooltips: true, selectionmode: ‘singlecell’,
    columns: [
    { text: ‘Agent Name’, dataField: ‘AgentName’ },
    { text: ‘Department’, dataField: ‘Department’, hidden: true },
    //{ text: ‘Site’, dataField: ‘Site’ },
    { text: ‘Conversation Count’, dataField: ‘ConversationCount’ }
    ]
    });
    gridAgent.on(‘bindingcomplete’, function (event) {
    $(“#errorMessage”).text(“”);
    var filtergroup3 = new $.jqx.filter();
    var filter3 = filtergroup3.createfilter(‘stringfilter’, record.Department.toString(), ‘EQUAL’);
    filtergroup3.addfilter(1, filter3);
    try { gridAgent.jqxGrid(‘addfilter’, ‘Department’, filtergroup3); } catch (e) {
    alert(e);
    }// add the filters.
    gridAgent.jqxGrid(‘applyfilters’);// apply the filters.
    return;
    });

    }
    }

    var initrowdetails = function (index, parentElement, gridElement, record) {
    var gridTeam = $($(parentElement).children()[0]);
    if (gridTeam != null) {
    gridTeam.jqxGrid({
    source: dataTable_UsageByTeam(), width: 850, height: 200, enabletooltips: true, selectionmode: ‘singlecell’,
    initrowdetails: initrowdetails2,
    rowdetails: true,
    rowdetailstemplate: { rowdetails: “<div id=’subgrid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
    columns: [
    { text: ‘Department’, dataField: ‘Department’ },
    { text: ‘Site’, dataField: ‘Site’, hidden: true },
    { text: ‘Conversation Count’, dataField: ‘ConversationCount’ }
    ]
    });
    gridTeam.on(‘bindingcomplete’, function (event) {
    $(“#errorMessage”).text(“”);
    var filtergroup2 = new $.jqx.filter();
    var filter2 = filtergroup2.createfilter(‘stringfilter’, record.Site.toString(), ‘EQUAL’);
    filtergroup2.addfilter(1, filter2);
    try { gridTeam.jqxGrid(‘addfilter’, ‘Site’, filtergroup2); } catch (e) {
    alert(e);
    }// add the filters.
    gridTeam.jqxGrid(‘applyfilters’);// apply the filters.
    });

    }
    }

    $(“#gridUsageBySite”).jqxGrid({
    source: dataTable_UsageBySite(),
    width: ‘99%’,
    enabletooltips: true,
    autoheight: true,
    sortable: true,
    filterable: true,
    pageable: true,
    showfilterrow: false,
    filtermode: ‘default’,
    initrowdetails: initrowdetails,
    rowdetails: true,
    rowdetailstemplate: { rowdetails: “<div id=’grid’ style=’margin: 10px;’></div>”, rowdetailsheight: 220, rowdetailshidden: true },
    columns: [
    { text: ‘Site’, dataField: ‘Site’ },
    { text: ‘Conversation Count’, dataField: ‘ConversationCount’ }
    ]
    });


    Hristo
    Participant

    Hello kayceegan,

    Maybe you see this but I would like to suggest you look at this blog post.
    Could you clarify it?
    Is there any error message in the console?

    Also, please, take a look at this article, it could be helpful, too.
    I would like to propose your attention on data” object and the formatData” callback.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

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

You must be logged in to reply to this topic.