{

Kendo UI Dropdown list tutorials and examples


DropDown UI component is a drop-down menu in which the user can select one element from the list of elements. When the user selected one element, the dropdown state is set to the element value.

Kendo provided a beautiful drop-down UI element.

Kendo UI is rich in UX experience the following examples are based on the kendo UI JQuery framework.

Kendo has support for integration with PHP, angular, and JSP technologies. and kendo Dropdown MVC support also available with the asp.net framework

Please download the required js files from the kendo website. Kendo UI drop-down list works by including these files. Include individual kendo.dropdownlist.min.js file or include kendo.all.min.js which include all kendo widget components

Kendo UI Dropdownlist basic example

The dropdown widget can be initialized in many ways, I am going to show you the popular ways.
1. Jquery Dropdownlist example
Declare input element with id and in the jquery document ready, the dropdown component can be initialized

<div class="form-group">  
    <label for="dropdownlistexampleone">Kendo UI Dropdown List with text and value example  
    </label>  
    <input id="dropdownlistexampleone" class="form-control" style="width: 100%" />  
</div>
$("#dropdownlistexampleone").kendoDropDownList({  
   dataTextField: "text",  
   dataValueField: "value",  
   dataSource: {  
       data: data  
   }  
});

2. create a normal dropdown as per HTML specification

<div class="form-group">  
    <label for="htmldropdownlist"> Kendo UI Dropdown List widget</label>  
    <select id="htmldropdownlist" class="form-control">  
        <option>Dropdown item 1</option>  
        <option>Dropdown item 2</option>  
        <option>Dropdown item3</option>  
    </select>  
    <script>  
        $(document).ready(function() {  
            $("#htmldropdownlist").kendoDropDownList();  
        });  
    </script>

kendoDropDownList called once the DOM object is ready

3. Datasource Ajax example to bind the remote data

In applications, there are cases where we need to attach the data returned from the rest APIs. The data format can be json or jsonp format.
To bind the remote data, the Kendo UI framework provides a Datasource object.

 $("#id of html element").kendoDropDownList({  
     dataTextField: "name",  
     dataValueField: "id",  
     dataSource: {  
         transport: {  
             read: {  
                 dataType: "json",  
                 url: "REST API End Point,  
             }  
         }  
     }  
 });  

Footer template will show on footer of the shown dropdown list

<div class="row">  
    <div class="form-group">  
        <label for="dropdownlistexampleone">Kendo UI Dropdown List with text and value example  
        </label>  
        <input id="dropdownlistexampleone" class="form-control" style="width: 100%" />  
    </div>  
</div>  
<script id="footerTemplate" type="text/x-kendo-template">  
    Total <strong>#: instance.dataSource.total() #</strong> items found  
</script>
$("#dropdownlistexampleone").kendoDropDownList({  
footerTemplate: $("#footerTemplate").html(),  
    dataTextField: "text",  
    dataValueField: "value",  
    dataSource: {  
        data: data  
    }  
});

and output is as per below screenshot Kendo UI Dropdown example

5. Kendo UI Dropdown list search items example

filter:contains an option to search the items

 <div class="row">  
        <div class="form-group">  
            <label for="dropdownlistfilterexample">Kendo UI Dropdown List Search items  
                example</label>  
            <input id="dropdownlistfilterexample" class="form-control" style="width: 100%" />  
        </div>  
    </div>  
$("#dropdownlistexampleone").kendoDropDownList({  
   footerTemplate: $("#footerTemplate").html(),  
   dataTextField: "text",  
   dataValueField: "value",  
   dataSource: {  
       data: data  
   },  
   filter: "contains",  
});

and output is as per below screenshot
kendo dropdown filter

That’s my understanding on kendo UI dropdown list

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.