jQuery UI Widgets Forums ASP .NET MVC How to obtain the data of the nested grid when clicking on the edit button?

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

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

  • Novato
    Participant

    Hi, I have a main grid with a nested grid like in your demo. I am working with dynamic columns and within my main grid I have a button type column called Edit.

    How can I get the data from the nested grid to show them in the textbox of my modal?

    This is my code.

    Thank you very much for your help.

    
    
    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,
                        updaterow: function(rowid, rowdata, commit) {},             
                        async: false,
                        success: function(data, status, xhr) {                                                        
                        commit(true);
                        
                        },
                                
                            });
    
                        }
    
                    };
    
                    var gridDataAdapter = new $.jqx.dataAdapter(gridSource);
    
                    var editrow = -1;
    
                    columnsArray.push({ text: 'Edit', datafield: 'Edit', filtercondition: 'CONTAINS', align: 'center', minwidth: 100, columntype: 'button', cellclassname: "color_especial",  
                        cellsrenderer: function() { },
                        buttonclick: function(row) {
    
                     //***************************  <strong> Here I want to get the data from the nested grid </strong>   **********************//                  
    
                           $("#Popup_Update").modal('show');
                        }
                    });
    			
    			
                    $("#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
    
                    });
    
                   //Button html input type button 
                    $("#buttonUpdate").click(function() {
    
                      $("#Popup_Update").modal('hide');
    
                        }
                    });
    
                },
    
                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');
        }
    }
    
    
    • This topic was modified 2 years, 6 months ago by  Novato. Reason: code

    Todor
    Participant

    Hello Novato,

    First for all, please, take a note that a sub-grid is initialized when you expand it for a first time. You will not be able to take a nested grid data if it is not first expanded.

    You could review the example code below. When a row is expanded all nested grid rows are logged in the console. I hope this would be helpful.

    <!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>

    Best Regards,
    Todor

    jQWidgets Team
    https://www.jqwidgets.com

    • This reply was modified 2 years, 6 months ago by  Todor.

    Novato
    Participant

    Hi Todor.

    This example works great for me but I have encountered a problem and that is that by filtering through the textbox using the showfilterrow property on my main grid I can no longer obtain the data as you mention me.

    Any idea how to fix this?

    Thank you.


    Novato
    Participant

    Hi, thanks. I have been able to solve my problem.

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

You must be logged in to reply to this topic.