How to disable a row when I click on a checkbox?

[NovatoParticipant]

Hello, I have my jqxgrid with 8 columns, 6 columns are data, 1 column is type checkbox and 1 column is a button type.

The button type column I use to update my data.

The checkbox type column will be used so that clicking on the checkbox will disable the row and also disable the button to update only that row so that it can not be updated. How I can get this?. I’ve searched the forums but I can not find a similar thing.

You will have some example

Thank you very much for your help.

[TodorParticipant]

Hello Novato,

Please review the following example whether it fits your needs.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[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');
    }
}

[TodorParticipant]

Hello Novato,

You could add cellbeginedit and cellsrenderer to the other properties below and they should work as well:

columnsArray.push({ text: 'Aprobar', datafield: 'Aprobar', filtercondition: 'CONTAINS', align: 'center', minwidth: 100, threestatecheckbox: false, columntype: 'checkbox', type: 'bool', cellbeginedit: cellbeginedit, cellsrenderer: cellsrenderer });

Unfortunately on every checkbox click updaterow callback is triggered.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

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

[Author]

Posts