Multi Select Dynamic Data Source

[Aubrey Ivan]

I have a form which will input a date time range and it will return a list of object, I want that list of object to be the datasource of my multi select, how do I do that? I am using asp. net mvc, what is the best approach? I am using jquery and ajax for my api calls.

[Misho]

Hello,

The provided information about you requirement is not sufficient to determine what is the desired behavior you are trying to achieve. My initial guess is that you have a range of dates which you define from a Kendo DateRangePicker and would like to generate dataitems for each of the dates in that range and set this list of items as a datasource for the Kendo MultiSelect component. If this is not the case please provide us with more detailed description of the behavior you are trying to accomplish.

In addition could you please isolate your current setup in a sample fully runnable project similar to the attached one where the configuration and the issue could be observed and send it back so we could successfully run it, debug and investigate it on our side and do our best to provide you with a reliable solution? 

Thank you for your collaboration.
Looking forward to hearing from you soon!

Best Regards,

Misho
Progress Telerik

[Aubrey Ivan]

Hi misho, Ive seen your example but I want to set it by datasource in the javascript side, I was able to make the read property work but I need to use ajax since I need to do some other things if the request failed, here is my script for updating the multi select


<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
                            ms.data = result;
                            console.log("success: ", result);
                        },
                        error: function (result) {
                            // notify the data source that the request failed
                            console.error("error: ", result);
                            window.location.href = "/Home/Connect";
                            console.error("error: ", result);                            
                        }
                    });
                }   
            }
        });
        dataSource.fetch();
        console.log('datasource: ', dataSource);

        ms.setDataSource(dataSource);      

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

I am sure I was able to get the data and show it inside the console logs, do I need to refresh the multiselect?

here is how I declared 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)
                                    )
                                }

[Aubrey Ivan]

I have tried this and it worked for me

                                    @(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)
                                    .DataSource(source =>
                                    {                                        
                                        source.Read(read =>
                                        {
                                            //read.Url("/Invoices/GetInvoicesByDateTimeRange")
                                            read.Action("GetInvoicesByDateTimeRange", "Invoices").Headers(headers)                                            
                                            .Data("getDateTimeRangeParameters");
                                        })
                                        .ServerFiltering(true);
                                    })
                                    )
                                }

 

but  I want to use AJAX since I want to be able to do something if the api failed or the read failed.

[Misho]

Hi,

The MultiSelect provides a set of options for binding to data.

To bind the MultiSelect, use any of the following data-binding approaches:

Ajax binding
Server binding
Custom binding
Model binding

If you would like to set the datasource dynamically on the javascript side, here is an example you could implement it using setDatasource method  and configure the datasource itself similar to the following example: https://demos.telerik.com/kendo-ui/multiselect/addnewitem :

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



    <script>
        function onClick() {
            //alert();
            var dataSource = new kendo.data.DataSource({
                batch: true,
                transport: {
                    read:  {
                        url: "/Home/ServerFiltering_GetProducts",
                        dataType: "json"
                    },
                    
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return {models: kendo.stringify(options.models)};
                        }
                    }
                },
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductID: { type: "number" },
                            ProductName: { type: "string" }
                        }
                    }
                }
            });

            var multi = $("#msInvoicesAPV1").data("kendoMultiSelect");
            multi.setDataSource(dataSource);
        }
    </script>

I'm attaching a sample that demonstrates this configuration.

 

Best Regards,
Misho
Progress Telerik

[K.Ramadan]

Hello,

i did exactly like the last example, but it didn't work.

When i click on the MultiSelect so that i can see the items of it . . . it shows just one item and it's undefined.

any ideas ?

Thanks in advance ..

[Misho]

Hello,

The attached sample in my previous post looks like working properly on my side with items bound to the Multiselect widget. Here is a screenshot of the result on my end: https://take.ms/BJbXT 

What I could suggest you is to open a separate support thread describing the specific problem and provide us with isolated sample runnable project where the issue  could be observed or a dojo sample and send it back together with the reproduction steps. In this way we will be enabled to run it locally, investigate the case on our side and do our best to provide you with more detailed information and reliable solution.

Best Regards,

Misho
Progress Telerik