jqGrid Checkbox column

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!

Solution

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.

Comments

[Oleg]

Which version of jqGrid and which version of jQuery you use? Do you need to have rowids of all checked buttons or you need do something in every row, but need to do just different work depend on the checkstate? Your problem can be definitively be solved. I ask additional questions only to make the code better from the performance point of view.

[Lorenzo]

Hi Oleg, thanks for your answer. I am using version 4.2.0 of the plugin. I shall iterate every grid row and do something depending on both checkboxes state.

[Lorenzo]

Not in my case. Your assumption is correct anyway, I actually bind btnAlert on document.ready.

[Lorenzo]

just a dumb question Oleg. Later in my code I am using the call to getRowData to get the value of the checkbox. This works very well as per your suggestion. However I should also access the value of the disabled attribute. How I can do this?

[Oleg]

@Lorenzo: Which problems you have with the usage of getRowData? Do you use not the standard 'checkbox' formatter like I recommended? If you still use custom formatter, that you have to use custom unformatter too to have correct values returned by getRowData.

[Lorenzo]

I am using your suggestion so I removed the custom formatter. I need to get not only the cell value but also its disabled status. Please let me know if it's more clear now

[Oleg]

@Lorenzo: The value rowData.Alert_A should be string which contain "True" or "False" (I mean that var rowData = $(dashboardID).getRowData(keys[i]);).

[Lorenzo]

Yes, that is correct. But I would like to know also if that checkbox is disabled or not. How I can do this?

[Oleg]

@Lorenzo: Do you know the rowid and you need to verify whether the checkboxs in columns 'Alert_A' and 'Alert_B' are disabled or not? Or you have some other information as rowid as the input?

[Lorenzo]

Yes I have the rowId. I have tried doing $(dashboardID).jqGrid ('getCell', keys[i], 'Alert_A'); but this also return just true or false...

[Oleg]

@Lorenzo: Rowid is just the id of the <tr> - row element. The row element contains <td> - cells elements. In your case the row Alert_A has the class Alert_A. So you can use for example $("#"+rowid+' td.Alert_A') to get the corresponding cell with the checkbox. So to test it you can use $("#"+rowid+'>td.Alert_A>input:checkbox').is(":checked") to test whether the checkbox is checked and $("#"+rowid+'>td.Alert_A>input:checkbox').is(":disabled") to test whether the checkbox is disabled.

[Lorenzo]

Hi, unfortunately does not seems to work! The selector works as expected and I am able to see that select correctly each checkbox. But when I do .is(':disabled') I get always false. If I try to do .attr('disabled') I get undefined. I can't understand it why!

[Lorenzo]

Ok. I have found the problem. The cellattr function apply the attribute exactly on the <td> so the exact way is to check if the TD has been disabled. Using your sample would be $("#"+rowid+'>td.Alert_A').is(":disabled") (I have just removed the last selector...). Thanks a lot!!! :D

[Oleg]

@Lorenzo: Ohhh, yes! I'm sorry. Of course we use cellattr which set attributes on the cell and not on the checkbox in the cell. So to test on "disabled" one should use $("#"+rowid+'>td.Alert_A').is(":disabled"). I didn't tested this, but I am sure that it will work.

[Oleg]

@Lorenzo: I didn't refreshed the page before posting the answer. You found it yourself. Fine!