Edit this page

ComboBox Migration

This article demonstrates the ASP.NET MVC server-side API for the Kendo UI ComboBox widget.

Server-Side API

Data Binding

Bind to List Collections


    Html.Telerik().ComboBox()
        .Name(“Combo”)
        .BindTo(new SelectList(Model.Products, "ProductID", "ProductName"))

    Html.Kendo().ComboBox()
        .Name(“Combo”)
        .BindTo(new SelectList(Model.Products, "ProductID", "ProductName"))
        .DataTextField(“Text”)
        .DataValueField(“Value”)

Create Items Manually


    Html.Telerik().ComboBox()
    .Name(“Combo”)
    . Items( items => items.Add().Text("Item1").Value("1"))

    Html.Kendo().ComboBox()
        .Name(“Combo”)
        .Items( items => items.Add().Text("Item1").Value("1"))
        .DataTextField(“Text”)
        .DataValueField(“Value”)

Do Ajax Binding


    Html.Telerik().ComboBox()
        .Name(“Combo”)
        .DataBinding(binding => binding.Ajax().Select(“_Select”, “Combo”))

    Html.Kendo().ComboBox().Name(“Combo”)
        .DataSource(source => {
            source.Read(read =>
            {
                read.Action("GetProducts", "Home");
            })
            .ServerFiltering(true);
        })
        .DataTextField(“Text”)
        .DataValueField(“Value”)

Define Delay


    Html.Telerik().ComboBox()
        .Name(“Combo”)
        .DataBinding(binding => binding.Ajax().Delay(300))

    Html.Kendo().ComboBox()
        .Name(“Combo”)
        .Delay(300)

Define ServerFiltering


Not supported

    Html.Kendo().ComboBox().Name(“Combo”)
        .DataSource(source => {
            source.Read(read =>
            {
                read.Action("GetProducts", "Home");
            }).ServerFiltering(true);
        })
        .DataTextField(“Text”)
        .DataValueField(“Value”)

Send Parameters to Server


    <%= Html.Telerik().ComboBox()
        .Name("AjaxComboBox")
        …
        .ClientEvents(events => events.OnDataBinding("onComboBoxDataBinding"))
    %>

    <script type="text/javascript">       
        function onComboBoxDataBinding(e) {
            e.data = $.extend({}, e.data, { filterMode: $('#ComboBoxAttributes_FilterMode').data('tDropDownList').value() });
        }
    </script>

    Html.Kendo().ComboBox().Name(“Combo”)
        .DataSource(source => {
            source.Read(read =>
            {
                read.Action("GetProducts", "Home")
                    .Data(“addData”);
            })     
        })
        .DataTextField(“Text”)
        .DataValueField(“Value”)

    <script type="text/javascript">
        function addData() {
            return { text : “Chai” }
        }
    </script>

Bind to Non-List Collections


Not supported


    Html.Kendo().ComboBox().Name(“Combo”)
        .DataTextField(“CompanyName”)
        .DataValueField(“CompanyID”)
        .BindTo(List<Company>);
    })

Other Options

Filter


    <%= Html.Telerik().ComboBox()
        .Name("AjaxComboBox")
        .Filterable(filtering =>
        {
            filtering.FilterMode(AutoCompleteFilterMode.Contains);                             
        })

    @(Html.Kendo().ComboBox()
        .Name("fabric")
        .Filter(FilterType.StartsWith)
    )

Min Characters


    <%= Html.Telerik().ComboBox()
        .Name("AjaxComboBox")
        .Filterable(filtering =>
        {
            filtering.MinimumChars(2);
        })


    @(Html.Kendo().ComboBox()
        .Name("fabric")
        .MinLength (2)
    )

Suggestions (AutoFill)


    Html.Telerik().ComboBox().Name("AjaxComboBox").AutoFill(true)


    Html.Kendo().ComboBox().Name("AjaxComboBox").Suggest(true)

Placeholder


    //Create item with text  “Select…” and value “”
    Html.Telerik().ComboBox().Name("AjaxComboBox").Placeholder(“Select…”)


    //Html5 placeholder
    Html.Kendo().ComboBox().Name("AjaxComboBox"). Placeholder (“2”)

Animations


    Html.Telerik().ComboBox().Name("AjaxComboBox").Effects(effects => effects.Slide())


    Html.Kendo().ComboBox().Name("AjaxComboBox") .Animation(animation => animation.Open(open => open.FadeIn(FadeDirection.Down))

AutoBind


Not supported. During Ajax binding, the setting is always `autoBind: false`.


    Html.Kendo().ComboBox().Name("Combo").AutoBind(false)

SelectedText when AutoBind is false


    Html.Telerik().ComboBox().Name("Combo")
        .DataBinding(binding => binding.Ajax().Select(“”, “”))
        .InputHtmlAttribute(new { value = “Chai” })

    Html.Kendo().ComboBox().Name("Combo").AutoBind(false).Text(“Chai”)

First Item Highlighting


    HighlightFirstMatch(true)

    HighlightFirst (true)

Unsupported onLoad Event

Kendo UI does not support action syntax—“() => {}”. None of the widgets supports the Onload event.


    Html.Telerik().ComboBox().Name("Combo").ClientEvents( events => events.OnChange(“change”))

    Html.Kendo().ComboBox().Name("Combo").Events( events => events.Change(“change”))

Templates


Not supported


    Html.Kendo().ComboBox().Name("Combo").Template(“#= data.CompanyName #”)

Height of Popup Element


    Html.Telerik().ComboBox().Name("Combo").DropDownHtmlAttributes( new style { height = “300px” })


    Html.Kendo().ComboBox().Name("Combo").Height(300)

Cascading Functionality


    Html.Telerik().ComboBox().Name("Combo").CascadeTo(“Id of the child ComboBox”)


    Html.Kendo().ComboBox().Name("Combo").CascadeFrom(“Id of the parent ComboBox”)

Encode


    Encode(false)

    Template(“ #= data.Text #”)

Client-Side API

MVC Kendo UI
value value
open open
close close
highlight None
text text
select select
enable enable
disable enable(false)
dataBind dataSource.data(data)
reload dataSource.read()

See Also

To see the articles on migrating Kendo UI controls from Telerik Extensions, browse the Widgets folder.