Telerik Extensions for ASP.NET MVC

Version Q2 2012, released 06/07/2012

Client-side Binding

ComboBox

select

DropDownList

 select

AutoComplete

About this example ASPXRazor

This example shows how to bind Telerik ComboBox for ASP.NET MVC to a JSON object.

The required steps are:

  1. Attach an event handler to the OnDataBinding client-side event: 
    <%= Html.Telerik().ComboBox()
        .Name("ComboBox")
        .ClientEvents(events => events
            .OnDataBinding("onDataBinding")
        )
%>
  2. Add a data binding handler function that will load the required data and pass it to the combobox 
    <script type="text/javascript">
    function onDataBinding(e) {
        var combobox = $('#ComboBox').data('tComboBox');

        var dataSource = [
                { Text: "Product 1", Value: "1" },
                { Text: "Product 2", Value: "2" },
                { Text: "Product 3", Value: "3" },
                { Text: "Product 4", Value: "4" },
                { Text: "Product 5", Value: "5" },
                { Text: "Product 6", Value: "6" },
                { Text: "Product 7", Value: "7" },
                { Text: "Product 8", Value: "8" },
                { Text: "Product 9", Value: "9" }
            ];

        combobox.dataBind(dataSource);

    }
</script>

    AutoComplete component should be bind to a list of string elements. 

    <script type="text/javascript">
    function onDataBinding(e) {
        var autocomplete = $('#AutoComplete').data('tAutoComplete');

        var dataSource = ["Product 1", "Product 2", "Product 3", 
                                "Product 4", "Product 5", "Product 6", 
                                "Product 7", "Product 8", "Product 9"];

        autocomplete.dataBind(dataSource);
    }
</script>

Interested in HTML5 and mobile-powered ASP.NET MVC apps?

Experience the next generation UI and framework for ASP.NET MVC development by downloading trial evaluation copy of Kendo UI Complete for ASP.NET MVC. Jumpstart your development with the available learning resources.

The differences between Telerik MVC Extensions and Kendo UI Complete for ASP.NET MVC, and their licensing models are explained here and here.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Other Demos: