This is a migrated thread and some comments may be shown as answers.

Multiselect deferred binding question

5 Answers 200 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
erwin
Top achievements
Rank 1
Veteran
erwin asked on 12 Sep 2017, 09:17 AM

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

 

5 Answers, 1 is accepted

Sort by
0
Accepted
Dimitar
Telerik team
answered on 14 Sep 2017, 08:52 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
erwin
Top achievements
Rank 1
Veteran
answered on 14 Sep 2017, 11:18 AM

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

 

0
erwin
Top achievements
Rank 1
Veteran
answered on 14 Sep 2017, 11:50 AM

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
          });
      }
0
Dimitar
Telerik team
answered on 15 Sep 2017, 12:47 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
erwin
Top achievements
Rank 1
Veteran
answered on 18 Sep 2017, 09:44 AM

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

 

 

Tags
MultiSelect
Asked by
erwin
Top achievements
Rank 1
Veteran
Answers by
Dimitar
Telerik team
erwin
Top achievements
Rank 1
Veteran
Share this question
or