[NovatoParticipant]

Hi, Todor.

Thank you very much for the example it is working very well for me.

Thank you.

[NovatoParticipant]

Hi, Todor.

Do you have an example that you can show me ?.

I tried it with ‘savestate’ and ‘loadstate’ but I have not had any results

Thank you.

[NovatoParticipant]

Hi Todor.

The example helped me solve my first problem. Thank you very much, but I still have the second problem and not if it is possible to do this:

How to save the state of the selected checkbox without a database and that when refreshing the page, these are still marked?

[NovatoParticipant]

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

[NovatoParticipant]

Hi Todor, thank you very much for your help, it served me a lot and I will check if it is possible to deactivate the update when the checkbox is pressed but if it is not possible I will leave it like this.

Thank you.

[NovatoParticipant]

Hi Todor how could I do this without using the cellbeginedit and cellsrenderer, because I am using dynamic columns.

I also want to ask you if it is possible that by clicking on the checkbox this does not update my data.

  In summary I want that by clicking on any checkbox in my checkbox column this disables the edit button so that the data can no longer be updated without updating the data by itself when clicking on the checkbox.

Thank you.

Here I put my code.

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

                     
                                         var id = $("#gvDatos").jqxGrid('getrowdata', rowid);
                                         var id_fila = id.id_Persona;

                        var usuario = "";
                     

                        $.ajax({
                            type: "POST",
                            datatype: "json",
                            url: "frmPersona.aspx/Actualiza_Persona_Bono",
                           // contentType: "application/json; charset=utf-8",
                            data: 
                                                      '{id_bonos:"' + id_fila +
                                                      '",Total_porcentaje:"' + $("#txtTotal_BonoPorcentaje").val() +
                                                      '",Total_pesos:"' + $("#txtTotal_BonoPesos").val() +
                                                      '",Total_porcentaje:"' + $("#txtTotal_GarantizadoPorcentaje").val() +
                                                       '"}',

                            async: false,
                            success: function(data, status, xhr) {                            
                             
                                commit(true);
                            },
                            error: function(error) {
                                alert(error.responseText);
                                console.log(error.responseText);
                                jsonValue = jQuery.parseJSON(Error.responseText);
                                alert(error.respose.Text);
                                alert("Error");
                            }
                        });

                    }

                };

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

                        editrow = row;
                       
                        var dataRecord = $("#gvDatos").jqxGrid('getrowdata', editrow);

                        var nombre_col_Total_bono_porcentaje = $("#gvDatos").jqxGrid('getcolumnat', 12).datafield;
                        var nombre_col_Total_bono_pesos = $("#gvDatos").jqxGrid('getcolumnat', 13).datafield;
                        var nombre_col_Total_garantizado_porcentaje = $("#gvDatos").jqxGrid('getcolumnat', 14).datafield;                    

                      
                        $("#txtTotal_BonoPorcentaje").val(dataRecord[nombre_col_Total_bono_porcentaje]);
                        $("#txtTotal_BonoPesos").val(dataRecord[nombre_col_Total_bono_pesos]);
                        $("#txtTotal_GarantizadoPorcentaje").val(dataRecord[nombre_col_Total_garantizado_porcentaje]);
                        

                     //Popup bootstrap display data in the input text. 
                       $("#Popup_Actualizar").modal('show');
                    }
                });
			
				//******************     Here I put my checkbox type column     *********************************************//
				 columnsArray.push({ text: 'Aprobar', datafield: 'Aprobar', filtercondition: 'CONTAINS', align: 'center', minwidth: 100, threestatecheckbox: false, columntype: 'checkbox', type: 'bool' });

                $("#gvDatos").jqxGrid({
                    source: gridDataAdapter,
					editable:true,
                    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 
                $("#btnActualizar").click(function() {

                    if (editrow >= 0) {

                        var row = {
                                                
                            "Total Bono %": $("#txtTotal_BonoPorcentaje").val(),
                            "Total Bono $": $("#txtTotal_BonoPesos").val(),
                            "Total Garantizado %": $("#txtTotal_GarantizadoPorcentaje").val(),                        

                              };

                        var rowID = $('#gvDatos').jqxGrid('getrowid', editrow);
                        var id_bonos_fila = rowID;
                        console.log("Este es id_bonos_fila: ", id_bonos_fila);

                        $('#gvDatos').jqxGrid('updaterow', id_bonos_fila, row);

                        $("#Popup_Actualizar").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');
    }
}

[NovatoParticipant]

Hello Hristo, thank you for your answer, my situation is what you show in the example that you sent me.

Use setcellvalue to update my rows since as you mention with updaterow I have to pass also the rows that are not updated. But unlike updaterow setcellvalue calls my database for every cell that is updated.

Thank you.

[NovatoParticipant]

Hi Hristo, thank you very much it works perfect

[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)`

[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.

[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.

[Author]

Posts