jQWidgets Forums

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

Tagged: 

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

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    ¿Como obtener los datos del grid anidado cuando expando una fila del grid princi Posts
  • June 6, 2019 at 3:39 am ¿Como obtener los datos del grid anidado cuando expando una fila del grid princi #105522

    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');
    }
}
    June 6, 2019 at 10:08 am ¿Como obtener los datos del grid anidado cuando expando una fila del grid princi #105532

    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

    June 6, 2019 at 9:52 pm ¿Como obtener los datos del grid anidado cuando expando una fila del grid princi #105547

    Novato
    Participant

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

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

You must be logged in to reply to this topic.