MultiSelectFor should behave like a DropDownListFor

[Alex]

Hello,

I have following MultiSelectFor:

    @(Html.Kendo().MultiSelectFor(x => x.TitleAttachmentForm.AuthorsList)
                                                    .AutoBind(true)
                                                    .DataTextField("SearchValue")
                                                    .DownArrow()
                                                    .DataValueField("Id")
                                                    .DataSource(ds => ds
                                                    .Custom()
                                                    .Transport(transport => transport
                                                    .Read(r => r
                                                    .Url("?handler=AuthorPublisherRead").Data("authorDataFunction")
                                                    ))
                                                    .ServerFiltering(true)
                                                    )
                                                    .Filter(FilterType.StartsWith)
                                                    .Height(400)
                                                    .ItemTemplate("<span class=\"k-state-default \"><strong>#= (data.Title == null) ? '' : data.Title # #: data.Firstname # #: data.Lastname #</strong><p>#: data.SubDisplayValue #</p></span>")
                                                    .TagTemplate("<span>#= (data.Title == null) ? '' : data.Title # #: data.Firstname # #: data.Lastname #</span>")
                                                    )

 

The MultiSelectFor is binded to following remote api:

  public async Task<JsonResult> OnGetAuthorPublisherRead([CanBeNull] string filterValue, [CanBeNull] string bindedvalue)

    {
      //Deleted
    }

This is used to filter for items on the remote site and get the binded value.

In my DropDownListFor I can use authorDataFunction to receive the value and the text of my DropDown:

   function authorDataFunction() {
            
            return {
                __RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken,
                filterValue: $("#mydropdown").getKendoDropDownList().filterInput.val(),
                bindedvalue: $("#mydropdown").getKendoDropDownList().value()

            };
        }

I played around with the api, however, I am not able to receive the input text and value(s):

    function authorDataFunction() {
            var multiselect = $("#TitleAttachmentForm_AuthorsList").data("kendoMultiSelect");
          

            return {
                __RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken,
                filterValue: multiselect.filterInput.val(),
                bindedvalue:multiselect.value()
            };
        }

Its telling me, that filterInput is undefined. also multiselect.text() does not work.

How can I access the binded value and the input in the .net core component?

[Aleksandar]

Hello Alex,

The MultiSelect provides reference to the input field of the component. You can use it to get the value of the user input. The value method will return the values of the selected dataItems, as defined via the DataValueField.

function authorDataFunction(){
         var multiselect = $("#products").data("kendoMultiSelect");
          
            return {
                __RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken,
                filterValue: multiselect.input.val(),
                bindedvalue:multiselect.value()
            };
    }

Check this REPL example for a demonstration of the above. If you inspect the network tab as you type you will note the data for the user input being sent and the already selected items as well.

The DropDownList does not provide an option for free text entry and thus when filtering is enabled an additional input is rendered, thus the filterInput field is available.

I hope this helps.

Regards,
Aleksandar
Progress Telerik