MultiColumnComboBox HtmlHelper Overview

The Telerik UI MultiColumnComboBox HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI MultiColumnComboBox widget.

The MultiColumnComboBox visualizes huge sets of data in a grid-like table.

Basic Configuration

The following example demonstrates the basic configuration of the MultiColumnComboBox HtmlHelper and how to get the MultiColumnComboBox instance.

    @(Html.Kendo().MultiColumnComboBox()
        .Name("multicolumncombobox")
        .Placeholder("Select product")
        .DataTextField("ProductName")
        .DataValueField("ProductID")
        .HtmlAttributes(new { style = "width:100%;" })
        .Filter("contains")
        .AutoBind(true)
        .MinLength(3)
        .Height(400)
        .DataSource(source => source
            .Read(read => read.Action("Products_Read", "MultiColumnComboBox"))
            .ServerFiltering(true)
        )
        .Events(events => events
            .Change("onChange")
            .Select("onSelect")
            .Open("onOpen")
            .Close("onClose")
            .DataBound("onDataBound")
            .Filtering("onFiltering")
        )
    )

    <script type="text/javascript">
        $(function () {
            // The Name() of the MultiColumnComboBox is used to get its client-side instance.
            var multicolumncombobox = $("#multicolumncombobox").data("kendoMultiColumnComboBox");
            console.log(multicolumncombobox);
        });
    </script>

Functionality and Features

Events

You can subscribe to all MultiColumnComboBox events. For a complete example on basic MultiColumnComboBox events, refer to the demo on using the events of the MultiColumnComboBox.

Handling by Handler Name

The following example demonstrates how to subscribe to events by a handler name.

    @(Html.Kendo().MultiColumnComboBox()
      .Name("multicolumncombobox")
      .BindTo(new string[] { "Item1", "Item2", "Item3" })
      .Events(e => e
            .Select("multicolumncombobox_select")
            .Change("multicolumncombobox_change")
      )
    )
    <script>
        function multicolumncombobox_select() {
            // Handle the select event.
        }

        function multicolumncombobox_change() {
            // Handle the change event.
        }
    </script>
    <%: Html.Kendo().MultiColumnComboBox()
        .Name("multicolumncombobox")
        .BindTo(new string[] { "Item1", "Item2", "Item3" })
        .Events(e => e
            .Select("multicolumncombobox_select")
            .Change("multicolumncombobox_change")
        )
    %>
    <script>
        function multicolumncombobox_select() {
            // Handle the select event.
        }

        function multicolumncombobox_change() {
            // Handle the change event.
        }
    </script>

Handling by Template Delegate

The following example demonstrates how to subscribe to events by a template delegate.

@(Html.Kendo().MultiColumnComboBox()
    .Name("multicolumncombobox")
    .BindTo(new string[] { "Item1", "Item2", "Item3" })
    .Events(e => e
        .Select(@<text>
            function() {
                // Handle the select event inline.
            }
        </text>)
        .Change(@<text>
            function() {
                // Handle the change event inline.
            }
            </text>)
    )
)

Referencing Existing Instances

To reference an existing Kendo UI MultiColumnComboBox instance, use the jQuery.data() configuration option. Once a reference is established, use the MultiColumnComboBox API to control its behavior.

// Place the following after the MultiColumnComboBox for ASP.NET MVC declaration.
<script>
    $(function() {
        // The Name() of the MultiColumnComboBox is used to get its client-side instance.
        var multicolumncombobox = $("#productMultiColumnComboBox").data("kendoMultiColumnComboBox");
    });
</script>

See Also

In this article
Not finding the help you need? Improve this article