Recursive Checkbox Selection in Treeview | Telerik MVC

Question

I recently encountered an issue dealing with the Telerik Treeview component and handling recursive selection with checkboxes when handling larger data sets (500-1000+ nodes).

With smaller data sets (100-300 nodes) the Treeview and its selection methods work as follows (as they should):

Initially - all nodes are selected.
Clicking a parent node toggles selection of all of the child nodes.
Unselecting a single child node will unselect the parent (and any grandparent / top-level nodes)

Most of these things I believe are fairly commonplace when dealing with Treeviews and selection. The current method that is being used isn't the cleanest and calls an unnecessary amount of additional events to be fired during the selection process.

I was just curious if anyone had handled an issue similar to this before I began tearing apart the current code (available below).

Existing Selection Code:

$('#TreeView').find("li").find('> div > .t-checkbox :checkbox').bind('click', function (e) {

        var isChecked = $(e.target).is(':checked');
        var treeView = $($(e.target).closest('.t-treeview')).data('tTreeView');
        var item = $(e.target).closest('.t-item');
        var checkboxes = item.find('.t-checkbox :checkbox');
        $.each(checkboxes, function (index, checkbox) { $(checkbox).attr('checked', isChecked ? true : false); treeView.checkboxClick(e, checkbox); });
        var siblings = item.parent().find('> li .t-checkbox');
        var siblingsLength = siblings.length;
        var checkedLength = siblings.find(':checked').length;
        if (siblingsLength == checkedLength) {
            var parentCheckBox = item.parent().closest('.t-item').find('> div .t-checkbox :checkbox');
            var grandparentCheckBox = item.parent().parent().parent().closest('.t-item').find('> div .t-checkbox :checkbox');
            parentCheckBox.attr('checked', true)
            grandparentCheckBox.attr('checked', true)
            treeView.checkboxClick(e, parentCheckBox)
            treeView.checkboxClick(e, grandparentCheckBox)
        }
        else {
            var parentCheckBox = item.parent().closest('.t-item').find('> div .t-checkbox :checkbox');
            var grandparentCheckBox = item.parent().parent().parent().closest('.t-item').find('> div .t-checkbox :checkbox');
            parentCheckBox.attr('checked', false)
            grandparentCheckBox.attr('checked', false)
            treeView.checkboxClick(e, parentCheckBox)
            treeView.checkboxClick(e, grandparentCheckBox)
        }
    });

Rion Williams · Accepted Answer · 2012-07-24 15:16:32Z

3

I found a solution that I feel will function at least effectively as of right now and works a great deal faster than the existing solution, even when dealing with very large data sets.

I created a simple function that fires upon the Checked event within the TreeView and handles all the necessary child selection:

function TreeView_Checked(e) {
    var current = $(e.item).find(':checkbox:eq(0)');
    //Check or uncheck all child nodes from this one
    var children = $(e.item).find(':checkbox');
    current.is(':checked') ? children.attr('checked', 'checked') : children.removeAttr('checked');
}

which is implemented by adding the following within the TreeView declaration:

TreeView().Name("TreeView").ClientEvents(e => e.OnChecked("TreeView_Checked"))

answered Jul 24, 2012 at 15:16

Rion Williams

76.9k38 gold badges206 silver badges335 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Daniel Lorenz · Accepted Answer · 2012-08-10 20:02:39Z

1

This code will select or deselect the parent along with all of its children. If you want the grand-parent, you can probably do .closest(".t-item")

  $(document).ready(function () {
        $("#btnSelectChildren").click(function () {
            nodeCheck(true);
        });
        $("#btnDeselectChildren").click(function () {
            nodeCheck(false);
        });
    });

    function nodeCheck(isChecked) {
        var treeView = $('#TreeView').data('tTreeView');
        var selected = $('#TreeView .t-state-selected');
        treeView.nodeCheck(selected, isChecked);
        selected.closest('li').find(".t-item").each(function () {
            treeView.nodeCheck($(this), isChecked);
        });
    }

answered Aug 10, 2012 at 20:02

Daniel Lorenz

4,3461 gold badge35 silver badges40 bronze badges

Collectives™ on Stack Overflow

Recursive Checkbox Selection in Treeview | Telerik MVC

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related