jqxGrid nested is not displayed when clicking the jqxGridPrincipal

[NovatoParticipant]

Hi, I would like you to orientate, since my jqxGrid nested in asp.net webforms was not implemented, it took a while without getting a nested grid. The results if the problem is thrown are in my initrowdetails. I have been guided by your documentation. I await your prompt response, thank you

            var columnsArray = [];          
            var datafields_detalle = new Array();
            var colums_detalle = new Array();
            var valores_detalle;
            var orders;
            var nesteddatafield = new Array();
            var nestedColums = new Array();
            
            
            
/******************************************* Main grid functions ****************************************************/////

function obtener_intervalo() {
               var id_Intervalo = 1;
                var Sucursal = "";
                var id_Rol = 1;

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

                        success: function(data) {
                            
                            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 datafields_bonos = new Array();
    var columns_bonos = new Array();
   

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

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

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

            var source =
            {
                datatype: "json",
                id: "id_Bonos",
                datafields: datafields_bonos, 
                localdata: valores             

            };

            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='grid' style='margin: 10px;'></div>", rowdetailsheight: 130, rowdetailshidden: true },
                initrowdetails: initrowdetails,                             
                ready: function() {
                    $("#gvDatosBI").jqxGrid('showrowdetails');
                                },                
                source: dataAdapter,
                columns: columnsArray,
               
                pageable: true,
                sortable: true,
                filterable: true,       

            });

          
            

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

function obtener_intervalo_detalle(id) {

    if (id != 0) {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "frmBI.aspx/ListarIntervalo_Detalle",
            contentType: "application/json; charset=utf-8",
            data: '{id_bono:"' + id + '"}',
            
            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) {

   

    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);
            }
            nesteddatafield = datafields_detalle;
            nestedColums = colums_detalle;     

        }

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

         
        }

  
/****************************************************************************************************************/

        var initrowdetails = function(index, parentElement, gridElement) {

            var grid = null;
  
            var row = index;
            var id = $("#gvDatosBI").jqxGrid('getrowdata', row)['id_Bonos']; 
             obtener_intervalo_detalle(id)                                   
            grid = $($(parentElement).children(id));           
            console.log(grid);
            
            var source_nested =
       {
            
           datafields: nesteddatafield,        
           localdata: valores_detalle

       }
            var adapter = new $.jqx.dataAdapter(source_nested);
            
               
            if (grid != null) {

                
                grid.jqxGrid(
				{
				    source: adapter, height: 130, width: 800,
				    columns: nestedColums
				});
				
				
            }
        }  

[HristoParticipant]

Hello Novato,

I remember we discussed the same scenario before.
Could you clarify your issue?
Is there any error message in the console?

Also, I would like to mention something I saw that you use a function to create the jqxGrid.
It is important to be initialized just once and for each one update on it to use its methods.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[NovatoParticipant]

hi hristo my problem with the nested grid is that it does not show me the data correctly. When I select the button of the first row to see the nested grid of each row it shows me blank but in my web method it sends me the corresponding data. When I click on the second row to see the nested grid it shows me the data of the first row that I clicked on. when I click on the third row it shows nothing and the other cells.

[HristoParticipant]

Hello Novato,

I would like to mention something.
I am not able to help you if you do not want to try my suggestions.

Instead of using the AJAX I would like to suggest you use our jqxDataAdapter which has all options of the AJAX but with some improvements.
In this direction I would like to suggest you look at the tutorial below which probably will help you to handle the case with extra HTTP variables:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-extra-http-variables.htm?search=grid
I would like to propose your attention on the “data” object and the “formatData” callback of the DataAdapter.

Also, if your issue still persists it will be better if you could provide me with a simplified example (jseditor/jsfiddle) with dummy records that demonstrate this.

One more thing because you use external variables for the columns and the datafields of the nested grid and you load them in the AJAX which has asynchronously behavior by default.
For this reason, you could try to set “async: false“ (on the AJAX).

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[NovatoParticipant]

Hello Hristo I have placed async: false as you said and clicking on the first row of my main grid shows me the nested grid. But when I click on my second row of the main grid it shows me a gray line. This is my code

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

/******************************************* Main grid functions ****************************************************/////

function obtener_intervalo() {
               var id_Intervalo = 1;
                var Sucursal = "";
                var id_Rol = 1;

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

                        success: function(data) {
                            
                            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 datafields_bonos = new Array();
    var columns_bonos = new Array();
   

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

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

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

            var source =
            {
                datatype: "json",
                id: "id_Bonos",
                datafields: datafields_bonos, 
                localdata: valores             

            };

            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='grid' style='margin: 10px;'></div>", rowdetailsheight: 130, rowdetailshidden: true },
                initrowdetails: initrowdetails,                             
                ready: function() {
                    $("#gvDatosBI").jqxGrid('showrowdetails');
                                },                
                source: dataAdapter,
                columns: columnsArray,
               
                pageable: true,
                sortable: true,
                filterable: true,       

            });
}

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

function obtener_intervalo_detalle(id) {

    if (id != 0) {
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "frmBI.aspx/ListarIntervalo_Detalle",
            contentType: "application/json; charset=utf-8",
            data: '{id_bono:"' + id + '"}',
            async: false,

            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) {

    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);
            }
            nesteddatafield = datafields_detalle;
            nestedColums = colums_detalle;     

        }

 }

/**********************************************************************************************************************************************/

var initrowdetails = function(index, parentElement, gridElement) {
        var row = index;
        var id = $("#gvDatosBI").jqxGrid('getrowdata', row)['id_Bonos'];
        obtener_intervalo_detalle(id);    
        var grid = $($(parentElement).children()[0]);
   
    var source_nested =
                       {                          
                           datafields: _nesteddatafield, //datafields_detalle,
                           localdata: valores_detalle
                       }
                       var adapter = new $.jqx.dataAdapter(source_nested);
                      
    if (grid != null) {
       
            grid.jqxGrid({
                source: adapter, height: 180, width: 800,                           
                columns: _nestedColums 
            });
    }

}
<code></code>

In the console shows this error

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).createInstance (http://localhost:58646/scripts/jqxgrid.js:7:9518)
at Object.a.jqx.applyWidget (jqxcore.js:7)`

[HristoParticipant]

Hello Novato,

The error message that you show – describe a case where there have a duplicated datafields of one jqxGrid.
Another thing the showrowdetails method is used with additional argument which describes on which row exactly to show the details.
I would like to suggest you try to create simplified nested grids with ‘hardcoded’ datafields that you know they are unique.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts