Programmatically changing a bound check box in Kendo Grid not holding its new value

Question

I am in need of assistance in an attempt to programmatically check/uncheck a checkbox in a kendo grid.

I have part of my Grids datasource for this relevant field as...

     receivereport: {
                        editable: true,
                        nullable: false,
                        required: false,
                        type: 'boolean',
                        validation: {
                            required: false
                        }
                    },

And the grids configuration is...

$("#contactGrid").kendoGrid({
        dataSource: contactGridDS,
        navigatable: true,
        dataBound: mapContactTypes,
        editable: true,
        edit: function (input) {


        },  
        toolbar: ["save", "cancel"],
        pageable: false,
        columns: [
            { field: 'email', title: 'Email', hidden: false, attributes: { "class": 'contactCell_email' } },
            { field: 'receivereport', title: 'Receive Reports?', hidden: false, attributes: { "class": 'contactCell_receivereport' }, template: '<input type="checkbox" #= receivereport ? "checked=checked" : "" # value=""  disabled="disabled" ></input>' }
        ],
        //filterable: true,
        sortable: {
            mode: 'single',
            allowUnsort: false
        }
    });

For brevity sake, I cut some of the other code out that's not relevant, such as other fields not involved here.

So, I have an email method that has a regex in it that works, and what I want to do is, if on focus, or focus out of the email field, if that email is invalid, make the receive report field false, but it's not registering dirty editing, and I even tried forcing it by appending some CSS rules and classes, which makes it "look" dirty, but when I change the value of the checkbox, on save, it goes back to what it was.

The data is bound to the receivereport data. So I think I read on the forums here that I need to do something like datasource.set("receivereport", false); And maybe a sync? The syncinc fires but it doesn't help and I must be calling the set incorrectly because the console says its firing on an unidentified object.

Here's the real kicker, I know how to access that check box and render it as false, but it flips right back to what it was bound to! It's not holding. Unless I click into that cell and do a click on the check box, it doesn't hold...

...unless I can simulate a fake click event on the target, being the checkbox...

I looked at the example here, Disable/Enable the checkbox in kendo grid based on column Value, but it seems a bit different and not what I need.

Bottom line - if the checkbox is true/checked, and a user goes back into the email field and renders it invalid, I want to automatically uncheck that checkbox, as well as make that checkbox disabled, until the user makes the email valid again. This also implies that a null email, means the checkbox must be false and disabled.

Anyways, any help would be immensely appreciated. Thanks.

Vladimir Iliev Vladimir Iliev · Accepted Answer · 2015-10-18T08:49:59

This can be done using the "change" event of the dataSource:

         dataSource = new kendo.data.DataSource({
            change: function(e) {
              if (e.action == "itemchange" && e.field == "email") {
                //you can check the email value as well:
                //var model = e.items[0];

                e.items[0].set("receivereport", false)
              }
            },

Here is the full example:

Grid: change field value depending on another field

Programmatically changing a bound check box in Kendo Grid not holding its new value

1 Answers