How to disable a button column with checkbox buttons and save its status ?

[NovatoParticipant]

Hello, I hope you can help me with these problems that I have not yet been able to solve. I have searched the forums but I can not find anything similar. I’m working with dynamic columns.

Thank you.

I have two columns in my grid, the first column is a checkbox type and the second column is a button type.

My number one problem is:
How to disable or block the edit button that is set aside when selecting the checkbox and that the checkbox can no longer be unchecked?

My problem number two is:
Can you save the status of the checkbox without a database and once you check the data the checkboxes still remain checked?

This is 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_Persona:"' + id_fila +
                                                      '",Total_porcentaje:"' + $("#txtTotal_Porcentaje").val() +
                                                      '",Total_pesos:"' + $("#txtTotal_Pesos").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;                                       

                      
                        $("#txtTotal_Porcentaje").val(dataRecord[nombre_col_Total_bono_porcentaje]);
                        $("#txtTotal_Pesos").val(dataRecord[nombre_col_Total_bono_pesos]);
                    
                        

                     //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' editable: true, cellvaluechanging: function(row, column, columntype, oldvalue, newvalue) {
            alert("Este checkbox ha sido presionado");
                $('#gvDatosBI').jqxGrid({ editable: false });
                $('#gvDatosBI').jqxGrid("updaterow");
                $('#gvDatosBI').jqxGrid("render");

            }
           });

                $("#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_Porcentaje").val(),
                            "Total Bono $": $("#txtTotal_Pesos").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 review the following example. On checkbox click the whole row is disabled. Also you cannot uncheck the checkbox once it’s checked. In the console is printed all checked checkboxes.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

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

[TodorParticipant]

Hello Novato,

All states and variables are reset after page refreshing. A workaround that I could offer is to save the checkboxes status in the local storage and on initial grid load to restore it.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

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

[TodorParticipant]

Hello Novato,

I’ve made an example. You could review it.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[NovatoParticipant]

Hi, Todor.

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

Thank you.

[Author]

Posts