This is a migrated thread and some comments may be shown as answers.
Multi Select Dynamic Data Source
6 Answers 88 Views
This is a migrated thread and some comments may be shown as answers.
Aubrey Ivan
Top achievements
Rank 1
Aubrey Ivan asked on 13 Nov 2019, 03:26 AM
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.

6 Answers, 1 is accepted

Sort by
0
Misho
Telerik team
answered on 14 Nov 2019, 01:03 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Aubrey Ivan
Top achievements
Rank 1
answered on 19 Nov 2019, 12:49 AM

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)
                                    )
                                }

0
Aubrey Ivan
Top achievements
Rank 1
answered on 19 Nov 2019, 01:29 AM

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.


0
Misho
Telerik team
answered on 20 Nov 2019, 01:45 PM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
K.Ramadan
Top achievements
Rank 2
answered on 12 May 2020, 06:41 AM

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 ..

0
Misho
Telerik team
answered on 13 May 2020, 12:50 PM

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

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Asked by
Aubrey Ivan
Top achievements
Rank 1
Answers by
Misho
Telerik team
Aubrey Ivan
Top achievements
Rank 1
K.Ramadan
Top achievements
Rank 2
Share this question
or