1

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.

Charles
  • 50,943
  • 13
  • 104
  • 142
Phil
  • 498
  • 6
  • 14

3 Answers3

2

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.

Sushanth --
  • 55,259
  • 9
  • 66
  • 105
  • Thank you Sushanth, I had removed the different things I had tried and only placed the most recent version in the question. My problem is that I only want this event caught for this specific column. The solution you provided will fire for all changes. Do you think there is a way to just get the one column's event? – Phil Dec 11 '12 at 04:31
0

This sample uses the 'cellendedit' event: checkboxes selection. The 'cellendedit' is raised when the checkbox's value is changed.

scripto
  • 2,297
  • 1
  • 14
  • 13
0

The cleanest way to do this that I could find is to wire up "cellvaluechanged". This captures the change of any cell value. Then the event args tells you the column name, the old value, new value, etc. You still have to probably go after the row to get some unique identifier from the row such as the unique key to a table (for instance).

    $("#grid").on("cellvaluechanged", function (event) {
        var theKey = $("#grid").jqxGrid("getcellvalue", event.args.rowindex, "key");
        doSomething(theKey, event.args.newvalue);
    });
Mark D Eilenberger
  • 1