New to Telerik UI for ASP.NET Core? Download free 30-day trial

ASP.NET Core DropDownList API

Loading Demo...

EXAMPLE

VIEW SOURCE
EDIT IN
- Telerik REPL

Also available for:

var previousDropDownListValues; window.demoComponentProperties = { sections: [ { label: 'Enabled', controls: [{ type: 'switch', name: 'enabled', label: 'Enabled', defaultValue: true }] }, { label: 'Readonly', controls: [{ type: 'switch', name: 'readonly', label: 'Readonly', defaultValue: false }] }, { label: 'Popup', controls: [ { type: 'segmented', name: 'popup', options: [{ value: 'open', label: 'Open' }, { value: 'close', label: 'Close' }], defaultValue: 'close' } ] }, { label: 'Value', controls: [ { type: 'button', label: 'Get value', onClick: function () { alert($('#movies').data('kendoDropDownList').value()); } }, { type: 'button', label: 'Get text', onClick: function () { alert($('#movies').data('kendoDropDownList').text()); } } ] }, { label: 'Select by index', controls: [ { type: 'numericTextBox', name: 'selectedIndex', defaultValue: 0, min: 0, max: 9, step: 1 }, { type: 'button', label: 'Select', onClick: function (values) { $('#movies').data('kendoDropDownList').select(values.selectedIndex); } } ] }, { label: 'Select by value', controls: [ { type: 'numericTextBox', name: 'selectedValue', defaultValue: 1, min: 1, max: 10, step: 1 }, { type: 'button', label: 'Select', onClick: function (values) { $('#movies').data('kendoDropDownList').value(values.selectedValue); } } ] }, { label: 'Select item starting with', controls: [ { type: 'textbox', name: 'searchTerm', defaultValue: 'Pulp', placeholder: 'Search term' }, { type: 'button', label: 'Select', onClick: function (values) { $('#movies').data('kendoDropDownList').search(values.searchTerm); } } ] } ], onChange: function (values) { var previousValues = previousDropDownListValues || {}; previousDropDownListValues = $.extend({}, values); var dropdownlist = $('#movies').data('kendoDropDownList'); if (!dropdownlist) { return; } if (values.enabled) { dropdownlist.enable(); dropdownlist.readonly(values.readonly); } else { dropdownlist.enable(false); } if (previousValues.popup !== values.popup) { dropdownlist[values.popup](); } } };

Select movie:

#movies-container { padding-top: 54px; padding-bottom: 30px; }

Description

Telerik UI for ASP.NET Core comes with a complete server-side API. You can configure all features of the Telerik UI for ASP.NET Core DropDownList component with simple API calls designed to feel natural. Since the server-side wrappers output JavaScript, you also have full access to the client-side API for maximum control in the browser. The Telerik UI for ASP.NET Core TextBox comes with an extensive set of API configurations. This demo shows how to utilize some of its functions.

The example demonstrates some of the most important API methods for the DropDownList which allow you to customize different aspects of the component such as enabling/disabling the field, selection, filter and more.

Additional Apps

This DropDownList example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for ASP.NET Core or ThemeBuilder.

ASP.NET Core DropDownList API

Description

Additional Apps

Support & Learning Resources

Additional Resources