Kendo UI is an emerging JavaScript framework that has gained huge popularity among the developer community. One of the reasons, it provides a rich set of widgets. But at times, our requirements get a bit more complex. This leaves you with an option of either building your own widget or modify existing widgets to match your requirements.

In this blog I will explain how you can extend Kendo UI widget. For basics, you Just click on the below URL which will take you to the Kendo UI site where it is well explained:

http://docs.telerik.com/kendo-ui/howto/create-custom-kendo-widget

First we will create a search widget (see image below) that will search and filter books and then display the selected books from the local data Source.

 
The search widget will list out the name of books. We can select multiple books from the list. As we type in the search text box, the list of books is filtered accordingly. After we select the books for searching, click on “Show Result”. Currently it just displays the list of selected book names. But you can perform your own operation with the selected books list. You can easily follow simple steps to create attractive search widgets using kendo UI. We will start with Step 1 as below:

STEP 1: Create a Custom UI Widget

Follow the steps from Kendo UI Docs site and create a custom widget. To that widget, we will add elements that we need. In present case, we will need an Auto Complete, a Button and a List View that contains list of book names. Within the List View, we will add the item as CheckList item. We will define all our elements in the Init method for creating the widget and then append it to the widget as shown in the screenshot below.

Create Kendo UI widgets for elements for AutoComplete and ListView.

 STEP 2: Define Data Sources for Auto Complete and List View

As we are using Auto Complete box as a search input text box, we are going to filter the data for CheckBox List below accordingly. We will provide same data in both data sources.

 
To understand the above scripts easily, we have used a very simple data source for both widgets. However, we must use same data sources for both the elements as the filter operation will be applied to the List View data source.

STEP 3: Define events of the elements with help of JQuery

“SelectAll” button will select all items from the CheckBox ListView. “Clear” button will uncheck all items from CheckBox ListView. “Show Selected Items” button will display the selected books from the Select books CheckBox ListView.

 

STEP 4: Define a search function that will filter the list view data

This function will be called when value of AutoComplete box changes. It will actually filter out the list view data source and populate the list accordingly.

 

STEP 5: Register the Plugin to Kendo UI

After all operations have been defined, you are ready to register your plugin with Kendo UI.

 

STEP 6: HTML Template Creation and Element Binding

As we have created the widget, we now need to use it in our HTML template. We will bind it using the MVVM template as shown below. “Template” is the Item template for the CheckBox List item used in Kendo List View Widget of our Search Widget.

 

You can find the demo for this search widget at http://trykendoui.telerik.com/itIz/3.

Reference blog link:
http://blogs.telerik.com/kendoui/posts/12-04-03/creating_custom_kendo_ui_plugins