Kendo UI Dropdownlist tutorials and examples


Learn Kendo UI Dropdownlist

DropDown UI component is a drop-down menu which 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 beautiful drop-down UI element. Kendo UI is rich in UX experience the following examples are based on kendo UI JQuery framework.

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

please download required js files from kendo website. Kendo ui drop-down list works by including this 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**  
  

`

kendoDropDownList  called once the DOM object is ready  
  

#### 3\. Datasource Ajax example to bind the remote data

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

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

Footer template will shown on footer of 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

[![](https://3.bp.blogspot.com/-0L-eoO7NLmM/W0xQZQTHpEI/AAAAAAAAB6Q/2uimwAyEx_sy4kuFzkHowjAp0_bpFYm9wCLcBGAs/s320/dropdown%2Bfooter.png)](https://3.bp.blogspot.com/-0L-eoO7NLmM/W0xQZQTHpEI/AAAAAAAAB6Q/2uimwAyEx_sy4kuFzkHowjAp0_bpFYm9wCLcBGAs/s1600/dropdown%2Bfooter.png)

  
  

#### 5.Kendo UI Dropdown list search items example

**filter:contains** an option to search the items  

`

 `  
$("#dropdownlistexampleone").kendoDropDownList({  
    footerTemplate: $("#footerTemplate").html(),  
    dataTextField: "text",  
    dataValueField: "value",  
    dataSource: {  
        data: data  
    },  
    filter: "contains",  
});`
```and output is as per below screenshot  
[![](https://2.bp.blogspot.com/-96m8J_-6pDg/W0xQPV26HGI/AAAAAAAAB6M/M4UY9-KBUAQ_w_B8JprRIc2npjVQK5WyACLcBGAs/s320/dropdown-filter.png)](https://2.bp.blogspot.com/-96m8J_-6pDg/W0xQPV26HGI/AAAAAAAAB6M/M4UY9-KBUAQ_w_B8JprRIc2npjVQK5WyACLcBGAs/s1600/dropdown-filter.png)  
That's my understanding on **kendo ui dropdownlist**
Similar Posts