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)
        }
    });

Answer 1

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"))