Animations to be used for opening/closing the popup. Setting to false will turn of the animation.

close: Object

Animation to be used for closing of the popup.

Example

//dropdownlist initialization
 <script>
     $("#dropdownlist").kendoDropDownList({
         dataSource: dataSource,
         animation: {
            close: {
                effects: "fadeOut",
                duration: 300,
                hide: true
                show: false
            }
         }
     });
 </script>

open: Object

Animation to be used for opening of the popup.

Example

//dropdownlist initialization
 <script>
     $("#dropdownlist").kendoDropDownList({
         dataSource: dataSource,
         animation: {
            open: {
                effects: "fadeIn",
                duration: 300,
                show: true
            }
         }
     });
 </script>

Controls whether to bind the widget on initialization.

Example

$("#dropdownlist").kendoDropDownList({
    autoBind: false
});

Instance of DataSource or the data that the DropDownList will be bound to.

Example

// bind to local data
var items = [ { Id: 0, Title: "Manager" }, { Id: 1, Title: "Developer" }, { Id: 2, Title: "Vice President" } ];
$("#dropdownlist").kendoDropDownList({
    dataSource: items,
    dataTextField: "Title",
    dataValueField: "Id"
});

Example

$("#dropdownlist").kendoDropDownList({
    dataSource: {
        transport: {
            read: "titles.json"
        }
    },
    dataTextField: "Title",
    dataValueField: "Id"
});

Sets the field of the data item that provides the text content of the list items.

Example

var items = [ { Id: 0, Title: "Manager" }, { Id: 1, Title: "Developer" }, { Id: 2, Title: "Vice President" } ];
$("#dropdownlist").kendoDropDownList({
    dataSource: items,
    dataTextField: "Title",
    dataValueField: "Id"
});

Sets the field of the data item that provides the value content of the list items.

Example

var items = [ { Id: 0, Title: "Manager" }, { Id: 1, Title: "Developer" }, { Id: 2, Title: "Vice President" } ];
$("#dropdownlist").kendoDropDownList({
    dataSource: items,
    dataTextField: "Title",
    dataValueField: "Id"
});

Specifies the delay in ms before the search text typed by the end user is cleared.

Example

$("#dropdownlist").kendoDropDownList({
    delay: 1000 // wait 1 second before clearing the user input
});

Controls whether the DropDownList should be initially enabled.

Example

$("#dropdownlist").kendoDropDownList({
    enabled: false // dropdown list will not be enabled
});

Example

// get a reference to the dropdown list
var dropdownlist = $("#dropdownlist").data("kendoDropDownList");
// disable the dropdown
dropdownlist.enable(false);

Define the height of the drop-down list in pixels.

Example

$("#dropdownlist").kendoDropDownList({
    height: 400
});

Controls whether the search should be case sensitive.

Example

$("#dropdownlist").kendoDropDownList({
    ignoreCase: false //now search will be case sensitive
});

Defines the initial selected item.

Example

$("#dropdownlist").kendoDropDownList({
    index: 1 // selects the second item in the dropdown list
});

Define the text of the default empty item. If the value is an object, then the widget will use it directly.

Example

$("#dropdownlist").kendoDropDownList({
    optionLabel: "Select An Option"
});

Example

$("#dropdownlist").kendoDropDownList({
    dataTextField: "text",
    dataValueField: "value",
    optionLabel: {
       text: "Select An Option",
       value: ""
    }
});

Template to be used for rendering the items in the list.

Example

//template
<script id="template" type="text/x-kendo-tmpl">
      # if (data.BoxArt.SmallUrl) { #
          <img src="${ data.BoxArt.SmallUrl }" alt="${ data.Name }" />Title:${ data.Name }, Year: ${ data.Name }
      # } else { #
          <img alt="${ data.Name }" />Title:${ data.Name }, Year: ${ data.Name }
      # } #
 </script>

 //dropdownlist initialization
 <script>
     $("#dropdownlist").kendoDropDownList({
         dataSource: dataSource,
         dataTextField: "Name",
         dataValueField: "Id",
         template: kendo.template($("#template").html())
     });
 </script>

Define the text of the widget, when the autoBind is set to false.

Example

$("#dropdownlist").kendoDropDownList({
     autoBind: false,
     text: "Chai"
});

Define the value of the widget

Example

$("#dropdownlist").kendoDropDownList({
     dataSource: ["Item1", "Item2"],
     value: "Item1"
});