enable/disable Buttons with #checkTreeView checkbox

3 posts, 0 answers
  1. jeff
    jeff avatar
    73 posts
    Member since:
    Sep 2014

    Posted 24 Oct 2014 Link to this post

    Hi folks, first time post, had to happen eventually...

    I'm using to TreeView to represent a hierarchy of user levels, and have enabled checkboxes and drag&drop. I also have two buttons, Add User and Modify User. If no user is selected, Add User button is enabled and Modify User button is disabled. Inversely, if a user is selected, Modify User is enabled and Add User is disabled.

    In the code I have a little jQuery:

    function onCheck(e) {
        $('#checkTreeview').change(function(){
            var c = this.checked ? 'disabled' : false;
            var d = this.checked ? false : 'disabled';
            $('#addUserButton').attr('disabled', c );
            $('#modifyUserButton').attr('disabled', d );
        });
        kendoConsole.log("Checkbox changed: " + this.text(e.node));
    }


    Two things, and I realize this may not be the way to approach, since, after all, it IS failing miserably, despite it being a Friday...

    1) For the first item in the treeview, after the first two clicks (check box, uncheck box) it then begins to toggle the buttons appropriately. However, it logs the change to the console consistently, every time.

    2) The toggle only works for the first checkbox, and no others;

    Clearly, this is the wrong way to approach this, so, in summation, how do I implement this functionality correctly with the treeview?
  2. jeff
    jeff avatar
    73 posts
    Member since:
    Sep 2014

    Posted 24 Oct 2014 in reply to jeff Link to this post

    Idiot mistake, changed it to a class, works everywhere, etc... but still have to click twice before it begins to toggle...

    function onCheck(e) {
        $('.checkTreeview').change(function(){
            var c = this.checked ? 'disabled' : false;
            var d = this.checked ? false : 'disabled';
            $('#addUserButton').attr('disabled', c );
            $('#modifyUserButton').attr('disabled', d );
        });
        kendoConsole.log("Checkbox changed: " + this.text(e.node));
    }


    For the first item in the treeview, after the first two clicks (check box, uncheck box) it then begins to toggle the buttons appropriately. However, it logs the change to the console consistently, every time - so, how do I implement this functionality correctly with the treeview?
  3. Kendo UI is VS 2017 Ready
  4. jeff
    jeff avatar
    73 posts
    Member since:
    Sep 2014

    Posted 24 Oct 2014 in reply to jeff Link to this post

    Ok, admittedly, the first version was a little odd, so I went to standard if/else and it works as expected:

    if ($('input.checkTreeview').is(':checked')) {
        $('#addUserButton').attr('disabled', 'disabled');
        $('#modifyUserButton').attr('disabled', false);
    } else {
        $('#addUserButton').attr('disabled', false);
        $('#modifyUserButton').attr('disabled', 'disabled');
    }
Back to Top