Wednesday, December 31, 2014

Multi Select in Kendo Tree View

Here is some code for how can we select multiple items in kendo tree view and also can move selected items to other kendo tree view.

 (1) Multi-Select Kendo Tree View

Consider there are two kendo tree view on your page one contains source of some items and other will become your selection from source items to destination. Default, kendo tree view provides single selection of an item. To make it multi-select put following line of code to your select event of kendo tree view.
select: function(e){
    e.preventDefault();
}

This will make tree view multi-select and you can select more than one item from your kendo tree view.

(2) Shift Selected Items
Shift selected(multiple) items from source tree view to destination tree view.
put following line of code to any of the event like button, hyperlink etc.

var
source = $('#source').data('kendoTreeView');
var selectedNode = source.select();
if (selectedNode.length > 0) {
    selectedNode.each(function () {
var dest = $("#dest").data("kendoTreeView");
dest.dataSource.add(source.dataItem($(this)));
source.remove($(this));
    });
}

First statement will be container for your tree view, and its select() method will pick whichever items you have selected in your source tree view to shift.
Simply, loop through your selected items using each function and for each item select destination tree view and add selected item to destination and remove selected item from your source.


That way you can select multiple items and move that multi-selected items from one kendo tree view to another tree view on any event.

No comments:

Post a Comment