Question

I have a jqxGrid which I have a few checkboxes in.
What I need to do is find an event which fires when the checkbox is changed.
I have tried:

• changed
• cellbeginedit
• cellendedit
• cellvaluechanged
• cellvaluechanging

.
All to no avail.

I do not want to fire and event for when any cell is changed, just this one checkbox.

Any ideas on how this might be accomplished?

I have included the code below.

The checkbox is the ‘Re-Cert’ line

$("#ModulesGrid").jqxGrid({
        width: 890,
        height: 350,
        theme: modulesTheme,
        columnsresize: true,
        source: dataAdapter,
        pageable: true,
        editable: true,
        columns: [
                  { text: 'Module Name', datafield: 'modulename', width: 100, editable: false },
                  { text: 'Optional', datafield: 'Optional', columntype: 'checkbox', width: 100 },
                  { text: 'Assigned', datafield: 'Assigned', width: 80 , columntype: 'checkbox'},
                  { text: 'Pass', datafield: 'pass',cellsrenderer: radioRenderer,width: 50, editable: false },
                  { text: 'NC', datafield: 'nc',cellsrenderer: radioRenderer,width: 50, editable: false },
                  { text: 'Fail', datafield: 'fail',cellsrenderer: radioRenderer,width: 50, editable: false },
                  { text: 'Re-Cert', datafield: 'recert', columntype: 'checkbox', width: 50, cellvaluechanged: function(event){alert(1);}},
                  { text: 'Re-Cert Reason', datafield: 'reason', width: 100, editable: false},
                  { text: 'Prior Cert', datafield: 'priorcert', width: 50, editable: false }
              ]
    });

here is a link to the API: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-api.htm

Edit: It would not let me tag this under jqWidget as that tag does not exist and I do not have 1500 rep. Sorry is this confuses.

Answer 1

I had a similar issue with this while working with this plugin.

So instead of the inbuilt event , I tried assigning the click event to the element by using a checkbox image and assigning the event to the image.

Also I noticed that you are not binding the cellbeginedit or the cellendedit event ..

$("#ModulesGrid").bind('cellbeginedit', function (event) {
     var args = event.args;
  alert("Column: " + args.datafield + ",
           Row: " + (1 + args.rowindex) + ", Value: " + args.value);
});

And remove the event from the Definition and bind it like above

{ text: 'Re-Cert', datafield: 'recert', columntype: 'checkbox', width: 50 },

UPDATE

If thats the case you can handle the cellsrenderer method of that particular column..

var columncheckboxRenderer = function(row, column, value) {
    var html;
        html = '<span style="margin:4px;float:left" onclick="clickImage(this,'
                + row + ')"><img alt="selectme" class="image-unchecked" '  
                +  src="../../Images/checkbox_off.png"/></span>';

    return html;
}

{ text: 'Re-Cert', datafield: 'recert',  width: 50,
          cellsrenderer: columncheckboxRenderer, renderer: header},

Then write up the click event for the check box… That should get the work done for .. This is the way i handled the logic for my requirement.