Kendo Multiselect passing placeholder as search value

Question

I have a form with a component Kendo UI Multiselect for ASP.NET MVC / Razor:

@(Html.Kendo().MultiSelectFor(m => m.Ids)
                .Filter(FilterType.Contains)
                .AutoBind(true)
                .MinLength(3)
                .Delay(500)
                .DataTextField("Value")
                .DataValueField("Key")
                .Placeholder("Please fill")
                .DataSource(
                    ds => ds.Read(
                        r => r.Action("FillMultiSelect", "ReportsController", new { companyId = IdentityManager.CompanyID, search = string.Empty })
                        ).ServerFiltering(true)
                )
            )

Javascript for filter configuration:

var $ids = $("#Ids").data("kendoMultiSelect");

$ids.dataSource.transport.options.read.data = basicFilter($ids);

var basicFilter = function ($element) {
   return {
       companyId: self.form.getModel().CompanyId,
       search: $element.input.val()
   }
}

When I type the search text in the "Ids" field, the parameter passed to Action of MVC is the value of placeholder field, not what was typed:

What’s wrong with my code?

Answer 1

The error was in the way to recover the entered value in MultiSelect. The correct is to use the array filters of the object filter passed as parameter in the event data. The corrected Javascript code looks like this:

window.global.setDatasourceTransportFilter($("#Ids"), "kendoMultiSelect", basicFilter);

var basicFilter = function (e) {
   return {
       companyId: self.form.getModel().CompanyId,
       search: e.filter && e.filter.filters[0] ? e.filter.filters[0].value : ""
   }
}