Question

I have a fairly complex grid with two columns formatted as a checkbox. Those columns are defined as follow:

{ name: 'Alert_A', index: 'Alert_A', width: 22, align: 'center', sortable: false,
    formatter: CheckBoxFormatter, editable: true, edittype: 'checkbox', editoptions: {value: "True:False"}, 
    formatoptions: {disabled: false}, classes: "Alert_A" },
{ name: 'Alert_B', index: 'Alert_B', width: 22, align: 'center', sortable: false,
    formatter: CheckBoxFormatter, editable: true, edittype: 'checkbox', editoptions: { value: "True:False" },
    formatoptions: {disabled: false}, classes: "Alert_B" }

The custom formatter CheckBoxFormatter is needed because I need to setup the disabled attribute of each checkbox depending on some custom rules, so I borrowed the native ‘checkbox’ formatter and added my custom rules.

I also have an external html button element and when I click on it I need to execute some code depending on which combination of checkbox selection have been made. My code looks like this:

$('#btnAlert').button().click(function (event) {
    event.preventDefault();
    var dashboardID = '#<%=dashboard.ClientID %>';
    doWork(dashboardID);
});

and later on the doWork function

var keys = $(dashboardID).getDataIDs();
for (var i = 0; i < keys.length; i++) {
    var rowData = $(dashboardID).getRowData(keys[i]);
    ...
    var reminderA = $(rowData.Alert_A).is(":checked");
    var reminderB = $(rowData.Alert_B).is(":checked");
    ...
    ... other application logic here
}

Unfortunately I am experiencing the fact that the value of reminderA and reminderB variables does not reflect the exact state of the checkboxes but instead does always reflect the state of their initial values (e.g. when they have been loaded by the jqgrid plugin). In other words those values does’nt get updated when the user clicks on a checkbox in the grid.

Is this the right way to achieve my result or I have to use different code? Any help?

Thanks a lot!

Answer 1

The problem which you have can be explained very easy. You use enabled checkboxes ( formatoptions:{disabled: false}), so the user are able to change state of the checkboxes. The problem is that you use your custom CheckBoxFormatter instead of original ‘checkbox’ formatter. The method getRowData which you use try to call unformatter which you not defined. So the value for the checkbox will be get using $(cellval).text() (see the source code of unformatter) and will be always empty.

So if you define your custom formatter and use methods like getRowData you have to define unformatter too.

In your case you don’t need to use custom formatter at all. What you need is just to define disabled="disabled" attribute for some checkboxes depend on some custom rules. So you want define only the formatter for the attributes. The cellattr (see here and here examples of the usage and my original feature request) is very simple to use and it’s exactly what you need. For example it could be like the following

cellattr: function (rowId, value, rawObject) {
    if (rawObject.deliveryStatus !== "sent") {
        return '';
    } else {
        return ' disabled="disabled"';
    }
}

In the case you can use the original checkbox formater and unformatter and all will work correctly.