Listbox binding to model

[Jon]

We are working on a Kendo UI with Kendo Listbox (asp.net MVC - https://demos.telerik.com/aspnet-mvc/listbox) but the example is for
@html.Kendo().ListBox() rather than having @html.Kendo.ListBoxFor() where @html.Kendo.ListBoxFor() allows for the model to be BindTo to selected items

Is there a way a ListBox can be used to bind to a model rather than an IEnumerable so that we can pass data back and forth via the model

[Alex Hajigeorgieva]

Hello, Jon,

The Kendo UI ListBox does not provide such syntax (ListBoxFor) as it is not meant to be used in that way. Nonetheless, dependent on the context, it could be used as an editor in a grid in an MVC project thanks to the Kendo MVVM. We have a project for ASP.NET Core here if you are interested. 

If you want to use it standalone, here are some things to consider:

1) You may bind it to the model with the BindTo() syntax:

@model IEnumerable<Models.Student>
@(Html.Kendo().ListBox()
   .BindTo(Model)
   .Name("listbox")
   .DataTextField("FirstName")
   .DataValueField("Id")
)

2) This generates a hidden select with the corresponding values and if it is just posted, it would be posted like any other simple select 



3) While changes during the interaction with the widget are visible to the user, the select options remain unchanged. To post the model in the correct order and selected options, I suggest looping over the items and making an ajax request - this way you will be able to post the full model.

https://www.telerik.com/forums/listbox-returning-data-items-in-order#O0avMatNIkKTxsSKO1KY0A

Let me know what you think and what is the exact intended usage so I can provide you with more specific suggestions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

[Ian]

Alex, Thanks for the reply. Using your code I can update the data source ok in the page. Just trying to figure out how to post the information back with the rest of the form information.

We have two potential use cases:

1: Building up a document from a list of fragments. So the idea was have a list box with available fragments and a connected list box. The user chooses which fragment to include and what order they appear in. 

2: Building a dynamic database query where a user can choose which columns are to appear in the results and the sequence those columns appear in.

So as you can see, the ability to add items from a selection and the return the specific order defined by the user is important. If you can then a better way of achieving this, I am open to ideas. I looked at the sortable control, but it doesn't give all the toolbar buttons you get with linked lists, and even with this, I can't see how to post the data back in one request.

[Alex Hajigeorgieva]

Hello, Ian,

I am glad that you found my suggestion helpful. 

In case you want to use a form and submit other form elements as well. then you may add a handler on the reorder event of the ListBox:

https://docs.telerik.com/kendo-ui/knowledge-base/list-box-reordering-not-working

.Events(e=>e.Reorder("onReorder"))

function onReorder(e){
    e.preventDefault();
    var dataSource = e.sender.dataSource;

    var dataItem = e.dataItems[0]
    var index = dataSource.indexOf(dataItem) + e.offset;
    dataSource.remove(dataItem);
    dataSource.insert(index, dataItem);
    e.sender.wrapper.find("[data-uid='" + dataItem.uid + "']").addClass("k-state-selected");
  }

Using this approach, I have reordered the list which kept the correct order in the form element as well. On submit, the form posts the option values in the order that they are in the hidden select element as a list of strings:



 

The name of the parameter that is expected in the controller should match so that the MVC binding can kick in, for example, my test ListBox has a .Name("lb")

*if you have two listboxes, use two lists with names to match the listboxes names:

 

Have a look at this alternative and let me know in case I may assist you further.

Regards,
Alex Hajigeorgieva
Progress Telerik