jQuery UI Widgets Forums Grid how to get the data for the nested grid

This topic contains 6 replies, has 4 voices, and was last updated by  Dimitar 9 years, 3 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • how to get the data for the nested grid #32378

    hi all,
    i make a grid and nested grid inside it,
    when i click on the row in the nested grid i got the row index but for the parent grid.

    how i can get the data of the nested grid.

    $(“#jqxgrid”).on(‘rowclick’, function (event) {
    var dataRecord = $(“#jqxgrid”).jqxGrid(‘getrowdata’, event.args.rowindex);
    alert(dataRecord.employeeid); \n”
    });

    thanks

    how to get the data for the nested grid #32454

    Dimitar
    Participant

    Hello ibrahim hassan,

    You need to bind to the nested grids’ rowclick event, not the master grid’s. Here is an example based on the demo Nested Grids:

    <!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.10.2.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/gettheme.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var theme = "";
    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;
    // create nested grid.
    var initrowdetails = function (index, parentElement, gridElement, record) {
    var id = record.uid.toString();
    var grid = $($(parentElement).children()[0]);
    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
    }
    if (grid != null) {
    grid.jqxGrid({ source: orderssource, theme: theme, width: 600, height: 200,
    columns: [
    { text: 'Ship Name', datafield: 'ShipName', width: 200 },
    { text: 'Ship Address', datafield: 'ShipAddress', width: 200 },
    { text: 'Ship City', datafield: 'ShipCity', width: 150 },
    { text: 'Ship Country', datafield: 'ShipCountry', width: 150 },
    { text: 'Shipped Date', datafield: 'ShippedDate', width: 200 }
    ]
    });
    }
    // nested grid rowclick binding
    grid.on("rowclick", function (event) {
    var args = event.args;
    var rowindex = args.rowindex;
    });
    }
    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: 670,
    height: 365,
    source: source,
    theme: theme,
    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: '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/

    how to get the data for the nested grid #59123

    masumb29
    Participant

    I used it Its working. Thank u

    how to get the data for the nested grid #62637

    learner
    Participant

    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>

    how to get the data for the nested grid #62655

    Dimitar
    Participant

    Hello learner,

    Please refer to the jqxDataAdapter guide Getting Started to learn how to use root and record.

    Best Regards,
    Dimitar

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

    how to get the data for the nested grid #62687

    learner
    Participant

    Thank you Dimitar for the link. But still I couldn’t find where I am mistaken. Please have a look at it. I am getting the parent data loaded. But the nested grid data are not being loaded. I also get the same number of rows as my data Is.But still the actual data is not being loaded.Please help me on this.
    This is my json data created by the controller.

      [{"OldDataId":3,"RequestTypeId":1,"RequestTypeName":"Restaurant","RequestDetailId":1,"RequestDetailName":"House"},    {"OldDataId":4,"RequestTypeId":1,"RequestTypeName":"Restaurant","RequestDetailId":2,"RequestDetailName":"Kfc"},{"OldDataId":5,"RequestTypeId":2,"RequestTypeName":"RetailStore","RequestDetailId":3,"RequestDetailName":"BigMart"}]
    
    

    And this is my code for loading the data:

    I need the RequestTypeId and RequestTypeName on the parent data and RequestDetailId and RequestDetailName on the nested grid.

    
    <!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: "OldDataId",
                    //record: "RequestType",
                    id: 'RequestTypeId',
                    datatype: "json",
                    async: false,
                    url: url
                };
    
                var employeesAdapter = new $.jqx.dataAdapter(source);
    
                var orderdetailsurl = "/Merchant1/GetRequestTypeList";
    
                var ordersSource =
                {
                    datafields: [
                        { name: 'RequestTypeId', type: 'integer' },
                        { name: 'RequestDetailName', type: 'string' },
                        { name: 'RequestDetailId', type: 'integer' },
                    ],
                    //root: "p",
                    records: "RequestDetailName",
                    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, records) {
                    var id = records.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: 'RequestDetailId',
                        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;"><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: 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>
    
    how to get the data for the nested grid #62749

    Dimitar
    Participant

    Hi learner,

    Your data collection is simple and does not need setting root or record. The issue is that you have set the text and datafield properties of the nested grids’ columns incorrectly. Instead of:

    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 },
        ]
    });

    you should have:

    grid.jqxGrid({
        source: nestedGridAdapter, width: 780, height: 200,
        columns: [
            { datafield: 'RequestDetailId', text: 'Request Detail Id', width: 200 },
            { datafield: 'RequestDetailName', text: 'Request Detail Name', width: 200 },
        ]
    });

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.