Can't get the value of an input element to use in dataSource.read()

[Ankit]

Below is my MultiSelect for a List<long> property of my model. In DataSource Read I am giving a js Function name "userIdFilter"

@(Html.Kendo().MultiSelectFor(m => m.PositionIds)
          .Filter("Contains")
          .Name("PositionIds")
          .Placeholder("Select Position")
          .ValuePrimitive(true)
          .DataTextField("Name")
          .DataValueField("Id")
          .DataSource(d => d.Read(read =>
          {
              read.Action("GetAllPositions","PositionCodeAjax").Data("userIdFilter");
          }).ServerFiltering(true))
          .HtmlAttributes(new { style = "width:95%;" })

this is userIdfilter method in a script tag

<script>
    function userIdFilter() {
        return { userId: $("#Id").val() };
    }
</script>

This is the numeric text box that has id="Id". I have applied display:none to its parent element

@(Html.Kendo().NumericTextBoxFor(m => m.Id).Enable(false))

All these snippets lie in a PopupEditView.cshtml which is called when editing/creating and element from the grid in my index.cshtml file

Now When I call Test it with edit command Edit pop up appears and userIdFilter is called. and value "0" is printed. after 100ms value "1182" is printed. Also my actionMethod recieves value 0.

But when I call userIdFilter() from console it logs value 1182 (the correct value) also object { userId: 1182 } is also logged and after 100ms value 1182 is printed.

Also if I happen to inspect the multiselect in the popup before the request with wrong value for dataSource is sent, Kendo makes a second request with correct value and it works as it should

I just cannot understand this strange behaviour and what is going wrong. Need help

[Aleksandar]

Hello Ankit,

Based on the provided details it appears that the data handler function is executed prior to the model being bound to the editors in the Grid's editor template. What I can suggest is setting the AutoBind() configuration for the MultiSelect to false and handling the Edit event of the Grid. Within the event handler get a reference of the MultiSelect and call it's dataSource read method:

.Events(ev=>ev.Edit("onEdit"))

<script>
function onEdit(e) {
        var element = e.container.find("#PositionIds")
        $(element).getKendoMultiSelect().dataSource.read();
    }
</script>

Let me know if this suggestion resolves the issue.

Note also that when using the Widget[For] initialization for components there is no need to specify the .Name() configuration option. You can read more on this at the end of the Basic Configuration section here:

https://docs.telerik.com/aspnet-mvc/getting-started/helper-basics/fundamentals#basic-configuration 

Regards,
Aleksandar
Progress Telerik