How to activate save button with custom field ?

[rallesaid]

i have a custom field, it's a bootstrap switch, which he called from a function

var config = {
            dataIndx : "usr_est",
            title    : "Estado",       
        };

function check_stat(config){
    var grid;
    return { title: config['title'], dataIndx: config['dataIndx'] , width:"100px", align: "center", resizable: false, editable:true,
            editor: false,
            editable: function (ui) {
                            return !ui.rowData.disabled;
                        },
            render: function (ui) {
                grid = this;
                var cellData = ui.cellData;
                var checked = cellData === 1 ? 'checked' : '';
                return  { text: "<label><input type='checkbox' " + checked + " name='check-stat'/></label>" };
            },
            postRender: function(ui){
                $("[name='check-stat']").bootstrapSwitch(
                    {size:'mini',
                    onText:'Activo',
                    offText:'Inactivo'}).on('switchChange.bootstrapSwitch', function(event, state) {
                     
                      var rowData = ui.rowData;
                      if(state){
                        this.value = 1;
                        rowData[config['dataIndx']] = 1;
                      }else{
                        this.value = 0;
                        rowData[config['dataIndx']] = 0;
                      }
                     
                      grid.addClass({ rowData:rowData, rowIndx: ui.rowIndx, cls: 'pq-row-edit pq-cell-dirty ' });
                      grid.refresh()
                     
                      console.log(ui)
                    });
               
            }           
        };
}



but when I change the state, the save button is not activated



How can I force to take it as a change made by the user? Any idea?

[paramvir]

This is not the right way to notify the grid of changes

Code: [Select]

                      //update rowData directly.
                      grid.addClass({ rowData:rowData, rowIndx: ui.rowIndx, cls: 'pq-row-edit pq-cell-dirty ' }); //not required
                      grid.refresh() //not required.


Please use updateRow() method to notify grid of changes instead of making direct changes in rowData. NO need to add dirty class and refresh grid manually.

[rallesaid]

indeed , with updateRow buttons are activated, but the custom button behaves strange when I add updateRow () , with the first click changes state, but when I want to go back to change state , does not work with a click , I do 2 click and states are reversed

load the firs state:


click to change state:


other click to change state:


other click:


and at this point , save changes button does not work, but only it happens when I put the updateRow method

[paramvir]

Could you share a working example / jsfiddle so that I can have a look.