Kendo UI – Tree view Control

 Kendo UI – Tree view Control

1.1     Introduction

The Kendo UI Tree View Control helps to display the hierarchy of nodes that can be used to represent the organization structure, file system or any other system which includes hierarchical representation.

A tree view is a graphical user interface element (widget) that presents a hierarchical view of information. Each item (often called a branch or a node) can have a number of sub items. This is often visualized by indentation in a list.

An item can be expanded to reveal sub items, if any exist, and collapsed to hide sub items.

1.2     How to Create Tree View Control

We can create Kendo UI Tree view using Html tags (Ordered List and Unordered List) , JSON and OData method.

·                  Ordered List and Unordered List Method

<ul id="treeview">

                    <li>  My Web Site

                        <ul>

                            <li> images

                                <ul>

                                    <li>logo.png</li>

                                    <li>body-back.png</li>

                                    <li>my-photo.jpg</li>

                                </ul>

                            </li>

                            <li>about.html</li>

                            <li>contacts.html</li>

                            <li>index.html</li>                       

                        </ul>

                    </li>

                </ul>

Add this Code in Script Section

<Script>

                $(document).ready(function() {

                    $("#treeview").kendoTreeView();                 

                });

 </script>

The code explains how to create tree view control in kendo UI using Html tags.

·         JSON

We can bind JSON to tree view.

Ex :

            <div id="treeview-left"></div>

Place a div tag with in form and add following script

$("#treeview-left").kendoTreeView({

                dragAndDrop: true,

                dataSource: [

                    {

                        text: "Furniture", expanded: true, items: [

                          { text: "Tables & Chairs" },

                          { text: "Sofas" },

                          { text: "Occasional Furniture" }

                        ]

                    },

                    {

                        text: "Decor", items: [

                          { text: "Bed Linen" },

                          { text: "Curtains & Blinds" },

                          { text: "Carpets" }

                        ]

                    }

                ]

            })

In this above code add data source property for tree view .In this data source can assign json data.

Need to move the nodes then enable the dragAndDrop Property true then the node will able to drag and drop in another tree view control.

Output :

                                               

·         OData Service Binding

We have a provision to load data using OData service

1.3     Properties

Kendo Tree view control has following properties:

1)    checkboxes

a.     If this property set as true, checkboxes will display within each tree view item.

b.    checkboxes (boolean) default value is false

$("#treeview").kendoTreeView({

    checkboxes: true

});

2)       checkboxes.checkChildren

a.     Indicates whether checkboxes of child items should get checked when the checkbox of a parent item is checked.

$("#treeview").kendoTreeView({

    checkboxes: {

        checkChildren: true

    }

});

3)    dataImageUrlField

a.     Sets the field of the data item that provides the image URL of the treeview nodes.

b.    dataImageUrlField (string) default value is null

var items = [

    { id: 1, text: "Tea", image: "tea.png" },

    { id: 2, text: "Coffee", image: "coffee.png" }

];

$("#treeview").kendoTreeView({

    dataSource: items,

    dataImageUrlField: "image"

});

c.        dataImageUrlField is optional we don’t need to set this property instead of set this property in json add a field with this name “imageUrl”. It will automatically take the image.

var items = [

    { id: 1, text: "Tea", imageurl: "tea.png" },

    { id: 2, text: "Coffee", imageurl: "coffee.png" }

];

$("#treeview").kendoTreeView({

    dataSource: items

});

4)       dataSource

a.        The data that the TreeView will be bound to.

b.       dataSource – Array.

c.        Refer the above example.

5)    dataTextField

a.     Sets the field of the data item that provides the text content of the tree view nodes.

b.    dataTextField (String) default value is null

              var items = [ { id: 1, ProductName: "Tea" }, { id: 2, ProductName: "Coffee"} ];

                                     $("#treeview").kendoTreeView({

                                         dataSource: items,

                                         dataTextField: "ProductName"

                                     });

c.        This property is also optional; we don’t need to set this property instead of set this property in json adds a field with this name “text”. It will automatically take the text.

                                     var items = [ { id: 1, text : "Tea" }, { id: 2, text : "Coffee"} ];

                                     $("#treeview").kendoTreeView({

                                         dataSource: items

                                     });

6)  dataUrlField

a.     Sets the field of the data item that provides the link URL of the treeview nodes.

b.    dataUrlField – String , default value is null

                var items = [

                                          { id: 1, text: "Tea", LinksTo: "http://tea.example.com" },

                                          { id: 2, text: "Coffee", LinksTo: "http://coffe.exam.com" }

                                         ];

                     $("#treeview").kendoTreeView({

                         dataSource: items,

                       dataUrlField: "LinksTo"

                     });

7)    dragAnDrop

a.     Disables (false) or enables (true) drag-and-drop on the nodes of a Tree View.

b.    dragAndDrop – Boolean , default value is false 

8)   template 

a.     Template for rendering of the nodes of the treeview.

                $("#treeview").kendoTreeView({

                        template: "#= item.text # <a href='\\#'>Delete</a>"

                     });

1.4     Methods

Kendo UI Tree view control has following methods:

1)    Append

a.     We can add a node in tree view using append method.

b.    Append method have two parameters

                                          i.    nodeData (String|Selector)

1.    A JSON-formatted string or selector that specifies the node to be appended.

                                        ii.    parentNode Node (optional)

1.    this is optional if pass this parameter then the newly appended node will be added as child otherwise add the node in same level.

var treeview = $("#treeview-images").data("kendoTreeView");

                    var treenode = treeview.select();

                    treeview.append([{ text: "Item 3", id: "3" }], treenode);

2)    Collapse , expand , toggle

a.     Collapse and expand the Node.

b.    Double click the node then the node has children then it will automatically expand or collapse.

var treeuom = $("# treeview ").data("kendoTreeView");

var treenode = treeuom.select();

 treeuom.collapse(treenode);   or  treeuom.expand(treenode);  or treeuom.toggle(treenode);

c.        In this above example get the tree view as object and check any node is selected .

Pass the selected node to collapse method the corresponding node will be collapsed.

Pass the selected node to expand method then corresponding node will be expanded.

Pass the selected node to toggle method then corresponding node is expanded then it will collapsed and vice versa.

d.        Collapse all and expand all property is there

Eg : var treeuom = $("#treeview").data("kendoTreeView");

       treeuom.collapse(".k-item");  or    treeuom.expand(".k-item");

3)       Enable

a.        Enable or disable the tree view node.

var treeuom = $("#treeview").data("kendoTreeView");

var treenode = treeuom.select();

treeuom.enable(treenode, false);

In this enable method we can pass the node want to enable or disable. Second parameter is optional default value is true.

b.        Enable all and disable all provision is there.

treeuom.enable(".k-item");

or

treeuom.enable(".k-item",false);

4)       insertAfter / insertBefore

a.        insertAfter - Inserts a node after a specified node in a TreeView. This method may also be used to reorder the nodes of a Tree View.

b.    Insert a node with the text, "JavaScript" after the node with ID, firstItem

var treeView = $("#treeView").data("kendoTreeView");

treeView.insertAfter({ text: "JavaScript" }, $("#firstItem"));

c.     Moves a node with ID, secondNode after a node with ID, firstItem

var treeView = $("#treeView").data("kendoTreeView");

treeView.insertAfter($("#secondNode"), $("#firstItem"));

d.        insertBefore - Inserts a node before another node. This method may also be used to reorder the nodes of a Tree View.

5)       Parent

a.         Gets the parent node of the item

b.        In this below example get the tree object and get the selected node in treeview.

Get the selected parent node using below coding and access the parent node details example node id and node text. If the Selected node is the root node then there is no parent.

 var treeview = $("#treeid").data("kendoTreeView");

                    var treenode = treeview.select();

                    var parent = treeview.parent(treenode);

                    if (parent.length != 0) {

                        var parentdata = treeview.dataItem(parent)

                        var parenttext = parentdata.text;

                    }

6)       remove

a.        Removes a node from a Tree View.

var treeview = $("#treeid").data("kendoTreeView");

                   var treenode = treeview.select();

                 treeview.remove(treenode) ;

b.        In this example explains remove the selected node.

7)       Select

a.        Gets or sets the selected node of a Tree View.

b.        Select the node with ID, firstItem

var treeView = $("#treeView").data("kendoTreeView");

treeView.select($("#firstItem"));

c.        Get the currently selected node

var treeView = $("#treeView").data("kendoTreeView");

var selectedNode = treeView.select();

Examples for Tree view accessing:

               

To get DataItem Value in Treeview:

----------------------------------

var data = $('treeview').data('kendoTreeView').dataItem(e.node);

console.log(data.id);

To Get the Selected Item Value from Treeview :

---------------------------------------------

var treeview = $("#trv").data("kendoTreeView");

var selitem = treeview.select();

var id=treeview.dataItem(selitem).id;

To Check Item Selected or Not:

--------------------------------

var selecteditem = $("#trv").data("kendoTreeView").select();

var IsSelected = (selecteditem.length>0 ? true : false)

To Append JSON Data in Treeview:

--------------------------------

var treeview = $("#trv").data("kendoTreeView");

treeview.append([{ text: "Item 3", id: "n5" },{ text: "Item 4", id: "n6" }], treeview.select());

To get selected node in Treeview:

---------------------------------

var treeView = $("#treeview").data("kendoTreeView");

var selectedNode = treeView.select();

To Deselect selected node in Treeview:

--------------------------------------

treeview.select().find("span.k-state-selected").removeClass("k-state-selected");

Looping a data object:

----------------------

$.each(data,function() {

    alert(this);

});

for( var key in data ) {

    alert( data[key] );

}

for( var i = 0, len = data.length; i < len; i++ ) {

    alert( data[i] );

}

Looping a data object and get the search value:

-----------------------------------------------

var data=$("#trv").data("kendoTreeView").options.dataSource;

var loreturn = getObjects(data, 'text', 'mockup.jpg');

           

function getObjects(obj, key, val) {

    var objects = [];

    for (var i in obj) {

        if (!obj.hasOwnProperty(i)) continue;

        if (typeof obj[i] == 'object') {

            objects = objects.concat(getObjects(obj[i], key, val));

        } else if (i == key && obj[key] == val) {

            objects.push(obj);

        }

    }

    return objects;

}

Looping a data object :

-----------------------

$.each(data, function (key, val) {

   recursiveFunction(key, val)

});

function recursiveFunction(key, val) {

  actualFunction(key, val);

  var value = val['item'];

  if (value instanceof Object) {

     $.each(value, function (key, val) {

        recursiveFunction(key, val)

     });

  }

}

function actualFunction(key, val) {

 //Get Value

}