This is a migrated thread and some comments may be shown as answers.

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

1 Answer 32 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Ankit
Top achievements
Rank 1
Ankit asked on 24 Mar 2021, 03:51 PM

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() {

          console.log($("#Id").val());

          setTimeout(() => console.log($("#Id").val()), 100);

        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


1 Answer, 1 is accepted

Sort by
0
Aleksandar
Telerik team
answered on 29 Mar 2021, 12:15 PM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
MultiSelect
Asked by
Ankit
Top achievements
Rank 1
Answers by
Aleksandar
Telerik team
Share this question
or