Ajax call not updating list unless another call to the server is fired-CodePudding

I have a ajax call that update a kendo multiselect's data source based on another dropdown's selection, the multiselect also has a read action that filters on the data.

ajax call

function getPsychiatrists() {
    return $.ajax({
        url: "/CommonJsonActions/GetPsychiatrists",
        type: "GET",
        dataType: "json",
        async: false,
        success: function (result) {

            var ddlData = $ddlExplainingPractitioner.data("kendoMultiSelect");
            var resultData = [];
            $.each(result, function (k, v) {
                resultData.push({ MemberId: v.MemberId, DisplayName: v.DisplayName });
            });

            ddlData.dataTextField = "DisplayName";
            ddlData.dataValueField = "MemberId";
            ddlData.dataSource.data(resultData);
        }
    })
}

kendo multiselect

@(Html.Kendo().MultiSelectFor(model => model.ExplainingPractitionerId)
    .Name("ExplainingPractitionerId")
    .HtmlAttributes(new { style = "width:100%;" })
    .MinLength(2)
    .Filter(FilterType.Contains)
    .Placeholder("Select Explaining Practitioner...")
    .AutoBind(false)
    .Animation(false)
    .MaxSelectedItems(1)
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetMembersByMemberTypeIds", "CommonJsonActions");
        });
    })
    .DataValueField("MemberId")
    .DataTextField("DisplayName")
    .BindTo(Model.ExplainingPractitioners)
    .Value(Model.ExplainingPractitioners)
    )

The issue I'm having is, the ajax fire up just fine, however it is not updating the multiselect's data unless there's a input to the multiselect, which triggers a call GetMembersByMemberTypeIds to the server. Only after that has happened, the multiselect's data will be updated when the next ajax call is fired. Is there something I can do in the jquery that would mimic that behavior or any other suggestions?

Edit It only happens when ExplainingPractitioners was assigned (found) during the page loads

CodePudding user response：

Try changing this:

ddlData.dataSource.data(resultData);

to this:

ddlData.setDataSource(new kendo.data.DataSource({ data: resultData }));

That should rebind the control immediately with the new data.

https://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect/methods/setdatasource