jQuery UI Widgets Forums ASP .NET MVC How to disable a button column with checkbox buttons and save its status ?

This topic contains 6 replies, has 2 voices, and was last updated by  Novato 3 months, 1 week ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author

  • Novato
    Participant

    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');
        }
    }
    
    
    • This topic was modified 3 months, 1 week ago by  Novato.

    Todor
    Participant

    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


    Novato
    Participant

    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?

    • This reply was modified 3 months, 1 week ago by  Novato.

    Todor
    Participant

    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


    Novato
    Participant

    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.

    • This reply was modified 3 months, 1 week ago by  Novato.

    Todor
    Participant

    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


    Novato
    Participant

    Hi, Todor.

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

    Thank you.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.