Is there a way to limit the number of items displayed in Kendo ui multiselect dropdown asp.net mvc?

Question

I have a kendo ui multiselect with like 60 values shown in the dropdown. Is there a way to only show like 10 items in the dropdown rather than all 60?

        @(Html.Kendo().MultiSelect().Name("multiselect")
        .AutoClose(false)
        .Filter("contains")
        .BindTo(list)

FYI - I'm not looking for the MaxSelectedItems() which limits the number of items that can be selected, rather looking to limit the number of items that the dropdown of multiselect displays at a time. Is there anyway to achieve this?

Thanks in advance

Answer 1

This can be achieved with JavaScript/jQuery with the following code:

@section scripts {
    <script>
        $(function() {
            var multiselect = $("#multiselect").data("kendoMultiSelect");
            var items = multiselect.dataSource.data().slice(0, 10);
            multiselect.setDataSource(items);
        })
    </script>
}

Try it out and let me know how it goes.

Answer 2

Using Kendo UI's built-in virtualization to dynamically load items as needed:

@(Html.Kendo().MultiSelect().Name("multiselect")
    .AutoClose(false)
    .Filter("contains")
    .Virtualization(true) // Enable virtualization
    .DataTextField("text") // Specify data field for text display
    .DataValueField("value") // Specify data field for value
    .DataSource(
        url: "@Url.Action("GetData", "YourController")", // URL to fetch data
        dataType: "json",
        serverFiltering: true, // Enable server-side filtering (optional)
        pageSize: 10 // Set page size to 10 (initial number of items)
    )
)

// Your controller action to return data (JSON format):

public ActionResult GetData(int page, string filter)
{
    // Implement your logic to fetch the requested page of data based on "page" and "filter" parameters
    // return JSON data with "data" and "total" properties
}

Check this and let me know if it works for you?