jQuery UI Widgets Forums ASP .NET MVC ¿Como obtener los datos del grid anidado cuando expando una fila del grid princi

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

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

  • Novato
    Participant

    Hi, I would like to know how I can get the data of the nested grid after having expanded a row.

    The first time I expand the row it appears as undefined and when I get the row it is where I recover the data.

    I would like to know if there is any method of the jqxGrid to obtain the data of the nested grid when expanding the row?

    This is the code of my main grid I am working with dynamic columns.

    
    function obtener_datos() {
    
        var persona = $("[id*=ddlPersona]").val();
        var Sucursal = "";
     
        if (persona != 0) {
           
            var valores;
            var datafields = new Array();
            var columns = new Array();
            var columnsArray = [];
          
            $.ajax({
                type: "POST",
                dataType: "json",
                url: "frmPersona.aspx/Intervalo",
                contentType: "application/json; charset=utf-8",
                data: '{id_persona:"' + persona + '",Sucursal:"' + Sucursal + '"}',
                async: false,
    
                success: function(data) {
    
                    if (data != '') {
              
                        valores = JSON.parse(valores[0]);
    
                        for (var i in valores[0]) {
                            datafields.push({ name: i, type: 'string' });
                            columns.push({ text: i, datafield: i, filtercondition: 'CONTAINS', align: 'center', minwidth: 100 });
                           
                        }
    
                        for (var j = 1; j < columns.length; j++) {
                            columnsArray.push(columns[j]);
                          
                        }
    
                    }
    
                    var gridSource =
                    {
                        datatype: "json",
                        datafields: datafields,
                        localdata: valores, 
                        async: false
                      
                    };
    
                    var gridDataAdapter = new $.jqx.dataAdapter(gridSource);
                   
    			
                    $("#gvDatos").jqxGrid({
                        source: gridDataAdapter,
                        width: '100%',
                        columnsresize: true,
                        autoheight: false,
                        autorowheight: false,
                        pageable: true,
                        showfilterrow: true,
                        filterable: true,
                        rowdetails: true,
                        initrowdetails: initrowdetails_BI2,
                        rowdetailstemplate: { rowdetails: "<div id='grid' style=' margin: 10px; '></div>", rowdetailsheight: 250, rowdetailshidden: true },
                     
                        handlekeyboardnavigation: function(event) {
                            var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
                            if (key == 13) {
                               
                                return true;
                            }
                            else if (key == 27) {
                             
                                return true;
                            }
                        },
    
                        columns: columnsArray
    
                    });
       
        /*******************  Nested grid data is only displayed when the row collapses  ********************************/
                $('#gvDatos').on('rowcollapse', function(event) {              
                   
                    console.log("Resultado con columnas subgrid fila contraida: ", col_detalle_subgrid);
    
                });
            
    /************** Here I show the data of the grid nested in the console. The first time I expand the row it shows me undefined in the console. *********/
    
                $('#gvDatos').on('rowexpand', function(event) { 
                                  
                    console.log("Result: ", col_detalle_subgrid);
    
                });
                   
                },
    
                error: function(error) {
                    alert(error.responseText);
                    console.log(error.responseText);
                    jsonValue = jQuery.parseJSON(Error.responseText);
                    alert(error.respose.Text);
                    alert("Error");
                }
            });
    
        }
        else {
          
            $('#PopupDatos').modal('show');
        }
    }
    
    

    Todor
    Participant

    Hello Novato,

    Please review the code sample below. It logs in the console the nested grid’s all rows data when it is expanded.

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id='Description'>This example shows how to display nested Grid plugins.</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
        <script type="text/javascript" src="../../scripts/jquery-1.12.4.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) {
                        grid.jqxGrid({
                            source: nestedGridAdapter, width: 780, 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 }
                           ]
                        });
    				}
                }
    
                var photorenderer = function (row, column, value) {
                    var name = $('#grid').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 grid
                $("#grid").jqxGrid(
                {
                    width: getWidth('Grid'),
                    height: 365,
                    source: source,
                    rowdetails: true,
                    rowsheight: 35,
                    sortmode: "many",
                    sortable: true,
    				initrowdetails: initrowdetails,
    				selectionmode: 'singlecell',
                    rowdetailstemplate: { rowdetails: "<div id='grid' style='margin: 10px;'></div>", rowdetailsheight: 220, rowdetailshidden: true },
                    ready: function () { },
                    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 }
                      ]
    				});
    
    			$('#grid').on('rowexpand', function (event) {
    				var args = event.args;
    				var rowBoundIndex = args.rowindex;
    
    				setTimeout(() => {
    					var nestedGridID = nestedGrids[rowBoundIndex][0].id
    					var rows = $('#' + nestedGridID).jqxGrid('getrows');
    					console.log('rows >>', rows);
    				}, 1);
    			});
            });
        </script>
    </head>
    <body class='default'>
        <div id="grid">
        </div>
    </body>
    </html>

    Let us know if you need further assistance.

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com


    Novato
    Participant

    Hello Todor, thank you very much, it is working correctly.

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

You must be logged in to reply to this topic.