Nested Grid in asp.net c# with WebForms

[NovatoParticipant]

Hello, I’m using jqxGrid to create a nested gri, passing it as parameter to the id when I get it from the selected row, but my secondary grid shows loading and it stays blocked. This is my code. I hope you can help me.

  var columnsArray = [];          
            var datafields_detalle = new Array();
            var colums_detalle = new Array();
            var valores_detalle;

/************************************** primary grid functions ****************************************************************************************/

function obtener_intervalo() {
                //alert("Ok");
                // alert("inicio intervalo");
                var id_Intervalo = 1;
                var Sucursal = "";
                var id_Rol = 1;

                if (id_Intervalo != 0) {
                    // alert("Pase id_itervalo <> 0  " + id_Intervalo + "," + Sucursal + "," + id_Rol)
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "frmBI.aspx/ListarIntervalo",
                        contentType: "application/json; charset=utf-8",
                        data: '{id_intervalo:"' + id_Intervalo + '",Sucursal:"' + Sucursal + '",ROl:"' + id_Rol + '"}',

                        success: function(data) {
                            //   alert("Entro correcto Ok");
                            Datasourcefuncion(data.d);
                        },

                        error: function(error) {
                            alert(error.responseText);
                            console.log(error.responseText);
                            jsonValue = jQuery.parseJSON(Error.responseText);
                            alert(error.respose.Text);
                            alert("Error");
                        }
                    });
                }
                else
                    alert("error en id_intervalo");
                return false;

            }
    
          
function Datasourcefuncion(data) {

    //var valores;
    var datafields = new Array();
    var columns = new Array();
    //var columnsArray = []; 

    if (data != '') {
       valores = jQuery.parseJSON(data);   

               for (var i in valores[0]) {
                   datafields.push({ name: i });
                   columns.push({ text: i, datafield: i, width: 200 });
               }

               for (var j = 1; j < columns.length; j++) {                   
                   columnsArray.push(columns[j]);
               }
                             
        }

            var source =
            {
                datatype: "json",
                id: "id_Bonos",
                datafields: datafields, 
                localdata: valores,
                async: false
                          
            };

            var dataAdapter = new $.jqx.dataAdapter(source);           
            rellenar_grid(dataAdapter);

        }
            
            

function rellenar_grid(dataAdapter) {

    $("#gvDatosBI").jqxGrid(
            {
                width: 1000, //1600,
                columnsresize: true,
                autoheight: true,
                autorowheight: true,
                autoheight: true,
                altrows: true,
                rowsheight: 35,
                rowdetails: true,
                rowdetailstemplate: { rowdetails: "<div id='gvDatosBI_Detalle' style='margin: 10px;'></div>", rowdetailsheight: 150, rowdetailshidden: true },
                //initrowdetails: initrowdetails,
                //initrowdetails: level2,                
                ready: function() {
                $("#gvDatosBI").jqxGrid('showrowdetails');
                },
                source: dataAdapter,
                columns: columnsArray,
                pageable: true,
                sortable: true,
                filterable: true,

                rendered: function() {
                                        var gridCells = $('#gvDatosBI .jqx-grid-content').find('.jqx-grid-cell');
                                        if ($('#gvDatosBI').jqxGrid('groups').length > 0) {
                                            gridCells = $('#gvDatosBI').find('.jqx-grid-group-cell');
                                           //    alert('gridcell  ' + gridCells);
                                        }

                    $('#gvDatosBI').on('rowclick', function(event) {
                        dataRecord = $('#gvDatosBI').jqxGrid('getrowdata', event.args.rowindex);
                        var res = dataRecord.id_Bonos;                        
                        obtener_intervalo_detalle(res);
                        

                    });

                }

            });

}
  
    /********************************************************** secondary grid functions *************************************************/

function obtener_intervalo_detalle(res) {

    if (res != 0) {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "frmBI.aspx/ListarIntervalo_Detalle",
            contentType: "application/json; charset=utf-8",
            data: '{id_bono:"' + res + '"}',
            
            success: function(data) {
                // alert(data.d);
                DatasourcefuncionDetalle(data.d);

            },

            error: function(error) {
                alert(error.responseText);
                console.log(error.responseText);
                jsonValue = jQuery.parseJSON(Error.responseText);
                alert(error.respose.Text);
                alert("Error");
            }
        });
        }
        else
            alert("error en id_bonos");
        return false;

    }

function DatasourcefuncionDetalle(data) {

    //var valores_detalle;

    if (data != '') {
       valores_detalle = jQuery.parseJSON(data);
                               
            for (var i in valores_detalle[0]) {
       
                datafields_detalle.push({ name: i });
                colums_detalle.push({ text: i, datafield: i, width: 200 });
                //console.log(colums_detalle);
            }

        }

        var source_detalle =
            {
                datatype: "json",
                //id: "id_Bonos",
                datafields: datafields_detalle,                 
                async: false,
                localdata: valores_detalle
            };

            var dataAdapter_detalle = new $.jqx.dataAdapter(source_detalle);
            //orders = dataAdapter_detalle;
            rellenar_grid2(dataAdapter_detalle);
           // console.log(orders);
        }

function rellenar_grid2(dataAdapter_detalle) {

$("#gvDatosBI_Detalle").jqxGrid({

            columnsresize: true,
            autoheight: true,
            autorowheight: true,
            autoheight: true,               
            source: dataAdapter_detalle, width: 800, height: 100,
            columns: colums_detalle
                
            });
    }

[HristoParticipant]

Hello Novato,

Is there any error message in the console?
Also, I saw that you create the jqxGrid inside a function this is a reason for many cases to appear the issues.
Or you should be sure the initialization of the widget happens just once.
I would like to suggest to you when you want to update the grid to use its methods.
Please, take a look at this example with updatebounddata method: http://jsfiddle.net/jqwidgets/dRbAE/

You could hide the second jqxGrid and show it when it is ready.
Also, I would like to suggest you look at this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/masterdetails.htm

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[NovatoParticipant]

Hello these messages appear to me in the console

Uncaught Error: jqxGrid: Invalid column 'datafield' setting. jqxGrid's columns should be initialized with unique data fields.
    at Object.<anonymous> (jqxgrid.js:7)
    at Function.each (jquery-1.11.1.min.js:2)
    at b.(anonymous function)._initializeColumns (http://localhost:58646/scripts/jqxgrid.js:7:178361)
    at b.(anonymous function)._render (http://localhost:58646/scripts/jqxgrid.js:7:74805)
    at b.jqx.dataview.dataview.update (jqxgrid.js:7)
    at k (jqxgrid.js:7)
    at b.jqx.dataview.databind (jqxgrid.js:7)
    at b.(anonymous function).databind (http://localhost:58646/scripts/jqxgrid.js:7:51857)
    at b.(anonymous function).updatebounddata (http://localhost:58646/scripts/jqxgrid.js:7:69901)
    at b.(anonymous function).propertyChangedHandler (http://localhost:58646/scripts/jqxgrid.js:7:202849)

The second grid shows it to me with the data but it keeps loading. I will read the articles you gave me. Can you tell me how to hide the second grid and show it remembering that it is a nested grid? Thank you.

[HristoParticipant]

Hello Novato,

The error that appears relates to the “datafields“ it seems there are two datafields with the same name.
Please, check this.
You mentioned the nested grid for this I would like to suggest you look at this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/nestedgrids.htm?light
Also, I think this blog post will be helpful, too.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts