How to set MS datasource

[Aubrey Ivan]

I have a function like so

<script>
    function refreshMsInvoiceData1() {
        var ms = $("#msInvoicesAPV").data("kendoMultiSelect");

        var dataSource = new kendo.data.DataSource({
            transport: {
                read: function () {
                    $.ajax({
                        url: "/Invoices/GetInvoicesByDateTimeRange",
                        contentType: "application/json; charset=utf-8",
                        data: getDateTimeRangeParameters(),
                        success: function (result) {
                            // notify the data source that the request succeeded
                            console.log("success: ", result);
                        },
                        error: function (result) {
                            // notify the data source that the request failed
                            console.error("error: ", result);
                        }
                    });
                }   
            }
        });
        dataSource.fetch();
        console.log('datasource: ', dataSource);

        ms.setDataSource(dataSource);      

        console.log("ms", ms);
    }
</script>

 

I am calling this js function everytime there is a change in my selected date time range, I was able to see the data in the console logs but it is not updating the multiselect

Here is my multiselect

                                    @(Html.Kendo().MultiSelect()
                                        .Name("msInvoicesAPV")
                                        .Placeholder("Select invoices...")
                                        .HtmlAttributes(new { required = "required", style = "width: 100%", validationmessage = "Select Invoice Numbers." })
                                        .DataTextField("Number")
                                        .DataValueField("Id")
                                        .AutoBind(true)
                                    )

what am I doing wrong?

[Petar]

Hi,

Can you try executing the setDataSource method in the then section(when the promise is resolved) of the fetch method like the following:

<script>
    function refreshMsInvoiceData1() {
        var ms = $("#msInvoicesAPV").data("kendoMultiSelect");

        var dataSource = new kendo.data.DataSource({
            transport: {
                read: function () {
                    $.ajax({
                        url: "/Invoices/GetInvoicesByDateTimeRange",
                        contentType: "application/json; charset=utf-8",
                        data: getDateTimeRangeParameters(),
                        success: function (result) {
                            // notify the data source that the request succeeded
                            console.log("success: ", result);
                        },
                        error: function (result) {
                            // notify the data source that the request failed
                            console.error("error: ", result);
                        }
                    });
                }
            }
        });
        dataSource.fetch().then(function () {
            console.log('datasource: ', dataSource);
            ms.setDataSource(dataSource);
            console.log("ms", ms);
        });
    }
</script>

Most probably the new data is still not available on the client when the setDataSource method is executed and this is the reason why it is not updated.

If the above doesn't fix the issue, check the structure of the returned data. It should look like the following:

            data: [{ "Id": 1, "Number": "Bananas" },
                   { "Id": 2, "Number": "Cherries" }]

Regards,
Petar
Progress Telerik