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.

Durandal JS Work Arounds

Here is some work around while working with durandal framework
(A) Call function from another file
Follow the steps to use script file
- put your file name in define tag of js file where you want to use it
- put alias for that file in same file as an argument in function
- now you can use that file using its alias in your application

(B) To provide width for message box
Follow the steps to provide width in message box
- assuming like you have your app declared over the top of the viewmodel in following way
var app = require('durandal/app');
- app.showMessage("message", 'Warning', [{ text: "Yes", value: "Yes" }, { text: "No", value: "No" },true, { style: { width: "400px" } })

(C) To pass multiple argument for modal dialog
- assuming like you have your app declared over the top of the viewmodel in following way
var app = require('durandal/app');
- call showDialog to open view in dialog
app.showDialog('dialog view', "param1Value").then(function () {});
app.showDialog('dialog view', {param1,"param1value", param2,"param2value"}).then(function () {});
- how to access value
for single value, it will be like 
vm.activate = function (param1) { //param1 will be placed anywhere it requires}
for multiple value,
vm.activate = function (params) { //params.param1 for first parameter value and same for other parameter like //params.param2 and it will replace with value for param1 & param2 with param1value & param2value respectively}

(D) message box with multiple buttons, 
- assuming like you have your app declared over the top of the viewmodel in following way
var app = require('durandal/app');
- put your code like below and it will show up with three buttons Button1, Button2 & Button3 and on clicking of any button respective code block will be called
app.showMessage("Message", 'MessageType', [{ text: "Button1", value: "Button1" }, { text: "Button2", value: "Button2" }, { text: "Button3", value: "Button3" }]).done(function (result) {
if (result === 'Button1') {//Code for button1}
else if (result === 'Button2') {//Code for button2}
else if (result === 'Button3') {//Code for button3}
});

(E) Compose view
- to show only view you can directly do like following way

- to load your view model with your view for some processing you can put like following way

In above case, it will load html and associate js file for that view.

(F) Working with view
- to work or bind any event for any control in view, you can bind it in "attached" event because in "activate" event it will be load your full view to "DOM" and in "attached" event you can play with it.

(G) Navigation process
- If you want to cancel navigation or need to process some logic while user navigate away from existing location you can put your logic to "canDeactivate" event.
- In this event, you can process your logic and based on that you can cancel navigation for user