Cancelling click on bound checkbox in Kendo grid

Question

Refer this question: Adding bindeable checkbox column to grid

I have a checkbox for a boolean value in a kendo grid. When the user clicks the checkbox, they are presented with a bootstrap modal dialog, which prompts them to confirm what they are doing. (Don't worry about what it does. That works fine.)

The issue is, if they cancel out of the confirmation dialog, I want to undo their change on the checkbox. (I need to undo it to keep the grid in sync with the data, because the call to update the underlying data only happens if they click OK.)

The template looks like this:

{
  title   : "Active",
  field   : "uaa",
  template: "<input name='active' class='userActiveToggle' type='checkbox' data-bind='checked: uaa' #= uaa ? checked='checked' : '' #/>"
}

The javascript function: The code in the "$('.modal-confirm .cancel') .click" function doesn't work. It fires, but it does not set the checkbox back to its original state. (And also, there is surely a better way to do this... Unbinding is necessary inside both the click functions; otherwise they will be bound multiple times. But that's not my main concern right now.)

$("#AccountsGrid").on("click", ".userActiveToggle", function (e) {
    var grid = $('#AccountsGrid').data().kendoGrid;
    var tr = $(e.target).closest("tr");
    var data = grid.dataItem(tr);

    $('.modal-confirm').modal({ show : false, keyboard : true, backdrop : true });
    $('.modal-confirm .modal-header h3').text('Modify User');
    var userName = data.uau;
    var isActive = data.uaa;
    data.set('uaa', isActive);
    var modifyDescription =  isActive ?  'deactivate' :  'activate';

    $('.modal-confirm .modal-body p').html('Are you sure you want to '+ modifyDescription + ' the user, ' + userName + '?');
    $('.modal-confirm .cancel').html('Cancel');
    $('.modal-confirm .submit').html('OK').addClass('btn-danger');

    $('.modal-confirm .submit').click(function(e){
        if (hc.ActivateUser(userName, !isActive))
            data.set('uaa', !isActive);
        $('.modal-confirm').modal('hide');
        $('.modal-confirm .submit').unbind().on('click', null);
    });

    $('.modal-confirm .cancel') .click(function(e){
        grid.closeCell();
        var col = $(this).closest('td');
        grid.editCell(col);
        alert(isActive);
        data.set('uaa', isActive);
        $(e.target).checked= isActive;
        grid.closeCell(col);
        $('.modal-confirm .cancel').unbind().on('click', null);
    });

    $('.modal-confirm').modal('show');
});

I've also tried disabling the checkbox in the template, which works, but then the function doesn't fire at all. Can someone please let me know if this is even possible? If not I can use a command button instead.

(Oh, and the call to data.set in the submit click of the modal is probably redundant. I originally copied this code from my command button, before adding the checkbox. The plan here is to get rid of the button if I can.)

balintant · Answer 1 · 2014-08-08T11:54:47.907

0

Try $(e.target).attr('checked', isActive); instead of $(e.target).checked= isActive;.

It most work.

Update:
Maybe the function runs before it would change the value, so you must change the value to !isActive. Try it!

Update #2:
And do not forget to use e.preventDefault... If so, you will have to change the checked parameter manually. And that is what you need. Only change the variable after confirmation.

And you could use removeAttr() too.

edited Aug 08 '14 at 11:54

answered Aug 08 '14 at 10:35

balintant

2,774
1
19
33

No, it didn't work. It seems like it you can't change the value after the user clicks it though... It shouldn't even be necessary to set the input item directly... When setting the data item, the grid normally refreshes the change straight away, at least from a command button. – Jerome Viveiros Aug 08 '14 at 10:46
I cannot test now how it works, but maybe the function runs before it changes the value, so you must change the value to `!isActive`. Let me see if that works. :) – balintant Aug 08 '14 at 11:45

Jerome Viveiros · Accepted Answer · 2014-08-12T08:44:43.947

Much as I hate answering my own question... The answer was to forget the checkbox, and replace it using a command with a button instead, but to dynamically change the text of the button, depending on the bound data. My field definition is now this:

    { field: 'Manage users', template: '<a href="\\#" class="k-button link">#= uaa ? "Deactivate user" : "Activate user" #</a>', width: 125 },

And the javascript function is below. (Because this is a command with a template, the original problem, namely the need to undo the user click which changed the state of the checkbox, is no longer an issue. I still use a confirm dialog, but the data is only ever changed when the user clicks OK.)

$("#AccountsGrid").on("click", ".link", function (e) {
var grid = $('#AccountsGrid').data().kendoGrid;
var tr = $(e.target).closest("tr");
var data = grid.dataItem(tr);

$('.modal-confirm').modal({ show : false, keyboard : true, backdrop : true });
$('.modal-confirm .modal-header h3').text('Modify User');
var userName = data.uau;
var isActive = data.uaa;
var modifyDescription =  isActive ?  'deactivate' :  'activate';

$('.modal-confirm .modal-body p').html('Are you sure you want to '+ modifyDescription + ' the user, ' + userName + '?');
$('.modal-confirm .cancel').html('Cancel');
$('.modal-confirm .submit').html('OK').addClass('btn-danger');

$('.modal-confirm .submit').click(function(e){
    if (hc.ActivateUser(userName, !isActive))
        data.set('uaa', !isActive);
    $('.modal-confirm').modal('hide');
    $('.modal-confirm .submit').unbind().on('click', null);
});

$('.modal-confirm').modal('show');

});

Cancelling click on bound checkbox in Kendo grid

2 Answers2