Kendo multi select component passing placeholder as value

2 posts, 0 answers
  1. Marcell
    Marcell avatar
    1 posts
    Member since:
    Jul 2016

    Posted 16 Mar 2017 Link to this post

    I have a form with a Kendo UI MultiSelect component 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 filtering:

    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 at the "Ids" MultiSelect, the parameter passed to the ASP.NET MVC Action is the value of the placeholder of the element (see attached images).

    What's wrong with my code?

    I have posted the same question at Stack Overflow: http://stackoverflow.com/questions/42844737/kendo-multi-select-component-passing-placeholder-as-value

     

  2. Ianko
    Admin
    Ianko avatar
    1780 posts

    Posted 20 Mar 2017 Link to this post

    Hello Marcell,

    First, I would suggest you using the Data method for the additional queries you need to send over to the action. 

    ...
    r => r.Action("FillMultiSelect", "ReportsController").Data("basicFilter")
    ...

    Everything else can be implemented in the Data method assigned. The placeholder is being added because there is a request on focusing the input, when the value is the placeholder. This is why I suggest you using the original filter value that MultiSelect passes to the filtering mechanism.

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

    I hope that helps.

    Regards,
    Ianko
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top