jQuery UI Widgets › Forums › ASP .NET MVC › jqxGrid nested is not displayed when clicking the jqxGridPrincipal
Tagged: .net, json ajax asp
This topic contains 5 replies, has 2 voices, and was last updated by Hristo 6 years ago.
-
Author
-
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 }); } }
March 5, 2019 at 12:29 pm jqxGrid nested is not displayed when clicking the jqxGridPrincipal #104229Hello 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 HristovjQWidgets team
https://www.jqwidgets.comhi 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.
March 7, 2019 at 12:48 pm jqxGrid nested is not displayed when clicking the jqxGridPrincipal #104263Hello 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 thedatafields
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 HristovjQWidgets team
https://www.jqwidgets.comHello 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)`March 11, 2019 at 3:18 pm jqxGrid nested is not displayed when clicking the jqxGridPrincipal #104301Hello Novato,
The error message that you show – describe a case where there have a duplicated datafields of one jqxGrid.
Another thing theshowrowdetails
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 HristovjQWidgets team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.