• 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:


    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.

    Kendo Search Filter

    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.

    kendo widget

    Create Kendo UI widgets for elements for AutoComplete and ListView.

    Kendo Autocomplete

     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.

    Kendo Filter

    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.

    Kendo 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.

    Kendo Search Function


    STEP 5: Register the Plugin to Kendo UI

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

    Kendo Plugin Register


    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.

    Kendo List View


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

    Reference blog link:

0 Years in
0 Loyal
0 Successful

Words from our clients


Tell Us About Your Project

We’ve done lot’s of work, Let’s Check some from here