MultiSelectFor Examples

[John]

Having trouble implementing MultiSelectFor and binding to remote data.

                                @(Html.Kendo().MultiSelectFor(model => model.Solutions)
                                    .DataSource(dataSource => dataSource
                                        .Read(read => {read.Action("GetSolutionNames", "Editor");
                                            read.Type(HttpVerbs.Post);})
                                        .ServerFiltering(false)
                                    )
                                    .AutoBind(false)
                                    .Placeholder("Select solutions...")                        
                                )

model.Solutions is a List<string>
The GetSolutionNames() Method in the controller simply returns a List<string>

Nothing is being passed back to the controller on submit.
Are there any examples of MultiSelectFor?

Documentation isn't great.

[Georgi Krustev]

Hello John,

 
The described limitation is addressed in the latest internal build of Kendo UI. In the official Q1 2013 (2013.1.319) the widget was not able to show selected items when the dataSource is not bound (autoBind: false). We will document this functionality once it is officially released.

Regards,
Georgi Krustev
the Telerik team

[John]

Thanks for the reply Georgi,

Can you tell me when the next official release is out?

Regards

John

[Georgi Krustev]

Hello John,

 
The next official release of Kendo UI (service pack) is due the mid of May.

Regards,
Georgi Krustev
the Telerik team

[Eran]

Hi,

Does this means until this update multiselectfor will not work at all?

I have this code: 
@(Html.Kendo().MultiSelectFor(model => model.TargetingsCountries)
                  .Name("GeoLoactions")
                  .Placeholder("Select Countires")
                   .BindTo(LocationsNameList))

where LocationsNamesList and TargetingsCountries is list<string>

and i have the same behavior-  on load the form updates correctly, on submit i get null list object.
Am i doing something wrong or is it the same limitation?

[Georgi Krustev]

Hello Eran,

 
The MultiSelect works as expected in the 2013.1.319. It just does not support selecting items when the widget is not bound. This functionality was added in the latest internal build. Because you are not using deffered binding, probably the problem in your case is different. I will need a simple test project in order to investigate the issue locally.

Regards,
Georgi Krustev
the Telerik team

[Eran]

Attached is a demo app i created - in the main window you will see the object data, you can edit it and see the results again

I send you without the kendo Dll (as it passed 2 MB)
i am using :  Version 2013.1.319.340 

Please Advise

[Daniel]

Hello Eran,

The MultiSelect name picked from the expression is overridden with the Name method so the values will be posted with a different name and the model binder will not be able to populate the property. Removing the Name method should resolve the problem. I attached the updated project.

Regards,
Daniel
the Telerik team

[John]

I'm still having awful trouble getting this to work. 
Even on latest Internal Build.


Anyway, one other slightly related question:
                               
@(Html.Kendo().MultiSelectFor(model => model.AccessibleSolutions)
 .DataSource(source => {
     source.Read(read =>
    {
          read.Action("GetSolutionNames", "Editor");
          read.Type(HttpVerbs.Post);
     });
})
.Placeholder("Select solutions...")
.HtmlAttributes(new {style= "width:250px"})
)

Just noticed in my inspector that the above code is making TWO read calls. Every other widget in my project is making one. Anyone else getting this behaviour?

[Daniel]

Hello John,

Are you using the MultiSelect in an editor for a Grid or a ListView? In that case duplicate requests will be made because the widget will read the data once it is initialized and once when the value method is used by the binder. If that is the case then you should use the AutoBind method to prevent the request on initialization e.g.

@(Html.Kendo().MultiSelectFor(model => model.AccessibleSolutions)
     .AutoBind(false)
     .DataSource(source => {
         source.Read(read =>
        {
              read.Action("GetSolutionNames", "Editor");
              read.Type(HttpVerbs.Post);
         });
    })

If the widget is not used in a Grid or a ListView and is not bound via MVVM, please provide the full code you are using or a runnable sample so I can investigate further.  Regards,
Daniel
the Telerik team

[John]

Ah I understand. 

Using the MultiSelect in an editor for a Grid here.

Regards

[John]

Still having trouble implementing MultiSelectFor and binding to remote data.
After updating to 2013.1.514

@(Html.Kendo().MultiSelectFor(model => model.Solutions)
    .DataSource(dataSource => dataSource
        .Read(read => {read.Action("GetSolutionNames", "Editor");
            read.Type(HttpVerbs.Post);})
        .ServerFiltering(false)
    )
    .AutoBind(false)
    .Placeholder("Select solutions...")
)

model.Solutions is a List<string>
The GetSolutionNames() Method in the controller simply returns a List<string>

Nothing is being passed back to the controller on submit (model.Solutions is Null)

The post headers look like this
Solutions[]:Test Solution1
Solutions[]:Test Solution2

Which tells me something is being sent......

[John]

Okay okay.......

FINALLY SOLVED IT.

It turns out that the model binder won't bind Solutions[] to viewModel.Solutions because of the brackets. 
When Kendo builds the list items via JQuery it appends the brackets [] to the end (WTF?)

This can be resolved by setting jQuery.ajaxSettings.traditional = true;

I'm on JQuery 1.7.1

Hours on that one..... hours.

[Dhruv]

Hey John, I'm having a similar issue to yours. I can't get the selected items to be picked up by the actionresult model. It just shows null. I tried you jQuery.ajaxSettings.traditional = true in my global helper js and still seeing same issue... Thoughts?