Kendo Treeview Inside Dropdown

Kendo UI provides a whole vast set of Out Of Box Controls .

We will be covering one controls which is highly sought but yet not present in kendo Library.

Kendo Node Dropdown ( Fusion of kendo treeview and kendo dropdown controls)


Kendo Node Dropdown


HTML Markup :

We will create an Un-ordered list of the data which we want to show as treeview inside the dropdown.

For the demo I will be creating a UL with static data. But the Un-ordered list can also be created with dynamic data like looping through a model in razor view of MVC.

Untitled

An input element for the Kendo Dropdown

  Untitled1

JQUERY CODE :

Untitled3

For finding the selected node we have to find out the selected text of the dropdown as below:

Untitled2

This is how a fusion of Kendo Tree view and Kendo dropdown can be created . Hope someday the parent nodes will also go the same way .

Will be coming up with few other Out of box combinations .

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s