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>