Listbox bind to model view

[Nouman]

Tag helpers in a form allow the following:

https://docs.microsoft.com/en-us/aspnet/core/mvc/views/working-with-forms

@model CountryViewModel

<form asp-controller="Home" asp-action="Index" method="post">

<select asp-for="Country" asp-items="Model.Countries">

</select>

<br />

<button type="submit">Register</button>

</form>

 

How do I accomplish the same thing with Kendo Listbox?

[Konstantin Dikov]

Hi Nouman,

You could bind the model to the ListBox helper as shown below:

@(Html.Kendo().ListBox()
            .Name("myListBox1")
            .HtmlAttributes(new { title = "Some title"})
            .BindTo(Model.Countries)
            .Selectable(ListBoxSelectable.Multiple)
        )

Hope this helps.


Regards,
Konstantin Dikov
Progress Telerik

[Nouman]

Hi Konstantin,

 

Thank you for your reply.  

 

Does Kendo have a ListBoxFor similar to @Html.MultiSelectFor?

[Konstantin Dikov]

Hello Nouman,

Although that the ListBox is similar to the MultiSelect, at the moment it does not have such model binding, because it is also comparable with the data management widgets and for the initial release of the ListBox our developers decided to consider the model binding only if there is demand for it. With that in mind, you could create a feature request in our public portal for that feature:

• http://kendoui-feedback.telerik.com

Best Regards,
Konstantin Dikov
Progress Telerik

[Nouman]

Konstantin,

 

Thanks again for this information.  MultiselectFor may work for us, especially since this widget can be customized.  We can close this issue for now and I will post again if I run into any issues customizing the look using item template.

[Coy]

I'd also be pleased with Model Binding for ListBoxFor.

 

Upvoted!

[Konstantin Dikov]

Hello Coy,

Could you please give your vote in the following public item, so you could increase its priority:

• http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/31116616-listboxfor-similar-to-multiselectfor

Best Regards,
Konstantin Dikov
Progress Telerik

[Coy]

Absolutely, Konstantin!  I actually gave it 3 votes!

Thanks for following up!

[Aaron]

Hello from 2020, I added another upvote to what is now the second-most upvoted "unplanned" feature request.

Can someone from Telerik provide anymore feedback on this? Can you guys provide any feedback on potential workarounds for this? Is there anything in particular that makes implementing this somewhat unfeasible? I would almost be willing to implement my own workaround for this, but the fact that it still hasn't gained "official support" and been implemented makes me a bit nervous (ex. do I really want to attempt something that not even the Telerik devs want to touch?).

[Aaron]

Update for anyone that might come across this in the future. After playing around with this a little bit, I think I see what's going on and have come up with a workaround. It looks like the problem of not supporting model binding basically boils down to the View's model using a complex type, and the HTTP POST not containing enough of the information and data to map the values back to the complex type.

Using OP's "Model.Countries" as an example, let's assume the controller is setting the model property something like this:

Countries = new List<Country>()
{
   new Country() { ID = 1, Name = "United States" },
   new Country() { ID = 2, Name = "Canada" },
   new Country() { ID = 3, Name = "Mexico" }
}

 

 

...and the View is creating the ListBox control like this:

@(Html.Kendo().ListBox()
   .Name("Countries"))
   .BindTo(Model.Countries)
   .DataValueField("ID")   // Country.ID
   .DataTextField("Name")  // Country.Name
   .Selectable(ListBoxSelectable.Multiple)
)

 

 

This will generate HTML similar to this:

<select name="Countries">
   <option value="1">United States</option>
   <option value="2">Canada</option>
   <option value="3">Mexico</option>
</select>

 

 

If the first two options are selected and submitted, the HTTP POST will include data something like: ...Countries=1&Countries=2

When it comes time for model binding, it sees the "Countries" model property is being POSTed back, but has no way to know what properties the values "1" and "2" correspond with (since the POST only includes the "value" attribute of the <option> element, and not all of the property names/values).

One workaround to this would be to add an additional property to the View's model that *does* match the data that will be included in the POST back to the server, and change the name of the ListBox control to match that new property's name.

For example, leave the Model.Countries property alone so it's still of type IEnumerable<Country>, add a second property Model.CountryIDsSelected of type IEnumerable<int>, and change the name that the controls in the View:

@(Html.Kendo().ListBox()
   .Name("CountryIDsSelected"))  // match the property name with the simple type so model binding will work after a POST
   .BindTo(Model.Countries)      // bind to the property with the complex type that has all of the data needed for display
   .DataValueField("ID")   // Country.ID
   .DataTextField("Name")  // Country.Name
   .Selectable(ListBoxSelectable.Multiple)
)

 

 

After a POST, Model.Countries still won't have the data submitted, but Model.CountryIDsSelected will be a List<int> containing the Country.ID values that were selected. This might not be the cleanest approach, but it should work.

Another similar option would be to use separate models for the GET and POST. The GET model would include the Countries property as an IEnumerable<Country> and would have all of the data necessary for building and displaying the ListBox control, and the POST model would include the Countries property as an IEnumerable<int> so model binding would work.

[Nikolay]

Hi Aaron,

Thank you very much for taking the time to post the workaround you have come up with. It is quite valuable and will definitely help others facing the same scenario.

As it comes to the feature request, I agree it has been quite a while since it has been posted and I see there are quite a number of people asking for this. I have lifted its priority and it will be discussed for the next iteration on the RoadMap.

Please let us know if you have any questions.

Regards,
Nikolay
Progress Telerik