Multiselect deferred binding question

[erwin]

Hello

I have a multiselect widget working in AutoBind mode. To speed up display, as long as the field is not changed, I would like to load the selected values using Autobind(false) and load the selected Items in .Value() as per the docs.

I have verified that Model.SelectedOwners contains the DataValues and Model.SelectedOwnersPreload contains a List of Items with Name / Id with the same DataValues.

If I set Autobind(true), the widget works as expected but is slow to read the full list of available items from the datasource. 

If I set Autobind(false) the widget works correctly on first load of the page. However, when the Form posts back and is rendered again, the selected Values are no longer shown, even though I render the page through the same code as on initial load and in the View, both the Value List (Model.SelectedOwners) and the Item List (Model.SelectedOwnersPreload) provide the expected Values.

What am I missing?

 

Currently the Code is:

@(Html.Kendo().MultiSelectFor(m => m.SelectedOwners)
                         .DataTextField("Name")
                         .DataValueField("Id")
                         .Placeholder(StringResource.SoftwareItemOwnersPlaceholder)
                         .AutoBind(true)
                         .DataSource(source =>
                         {
                             source.Read(read =>
                             {
                                 read.Action("GetAvailableOwners", "SoftwareItem");
                             });

                         }).Value( Model.SelectedOwnersPreload)
                   )

 

Regards,

Erwin

 

[Dimitar]

Hello Erwin,

The Kendo UI MultiSelect requires the selected items to be available in the DataSource of the widget. When AutoBind is set to false, no initial request is triggered to retrieve the DataSource and therefore the values cannot be properly selected.

In order to address both of your requirements (speed and preselecting model values), I would suggest you to configure the MultiSelect widget to use virtualization and AutoBind true. More on this topic can be found on the following article.

I have also prepared an ASP.NET MVC solution for you, where I have configured a MultiSelect widget to utilize virtualization. In addition to this I have wrapped the widget in a form, which will allow you to test and verify that the current selection in the MultiSelect will be preserved after a post to the controller (form submission). 

Regards,
Dimitar
Progress Telerik

[erwin]

Hi Dimitar, 

thanks, I'll have a look into it. First Idea was to start with

http://docs.telerik.com/aspnet-mvc/helpers/multiselect/overview#pre-select-values-on-initial-load

This seems a bit easier than full virtualiation and would cover my requirement of quickly loading a from. I did provide the selected options in the Value parameter as per this doc.

But I probably did not fully understand this, as it worked only on first render of a form, not on subsequent renders after first post, even though I could not find a difference in the rendered Model.

Regards

 

[erwin]

Hi Dimitar, I had a look at your example but I cant't see the virtualization concept. 

In your code you are returning all Cities which is exactly what I would like to avoid.

public ActionResult Index(int[] SelectedCities)
      {
          ViewBag.PostedCities = SelectedCities;

          return View(new CountryInfo
          {
              Cities = GetCities(),
              SelectedCities = SelectedCities
          });
      }

[Dimitar]

Hi Richard,

The previously sent example does not request the entire collection on load. If you open the browser network tab you will notice the following behavior:

• On page load a request is being made to Virtualziation_Read method, which return 79 items
  
  
• When u scroll down the list additional requests are made to retrieve the next batch of items

I have also prepared a short screencast which demonstrates the above described behavior. This is achieved through UI and Data virtualization and is explained in great details with code samples in the following Kendo UI Virtualization article.

Also with the above solution, you will notice that the total of items for the MultiSelect's DataSource is 5000 and the load speed for such a large dataset is very fast due to the virtualization approach.

I am also reattaching the ASP.NET MVC solution for your reference.

Regards,
Dimitar
Progress Telerik

[erwin]

Hi Dimitar,

looks like I messed up several sample projects, that's why I could not find the virtualization code at first.

Using the correct sample that you provided, I was able to successfully implement a virtualized multiselect widget.

Thanks and Regards

Erwin