Virtualization

[Chris]

How exactly can we get the virtualization working?  The demo is missing a lot of code.  There is also no information on how to send the antiForgery token, and no way to set the action to GET, in case you didn't want to post. Please post a complete working example with virtualization on autocomplete.

 

Thank you.

[Marin Bratanov]

Hello Chris,

I advise that you start by reviewing the following article that explains in detail how virtualization works - it applies to the dropdown widgets that support it (combo box, autocomplete, multiselect, dropdownlist): https://docs.telerik.com/kendo-ui/controls/editors/combobox/virtualization.

On the type of request - you can configure it in the DataSource configuration. I am attaching below an example of this for your reference and here's the most relevant bit:

.DataSource(source =>
{
    source.Custom()
        .ServerFiltering(true)
        .ServerPaging(true)
        .PageSize(80)
        .Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
        .Transport(transport =>
        {
            transport.Read(r => r.Action("GetDataGET", "SampleVirtualization").Type(HttpVerbs.Get));
        })
        .Schema(schema =>
        {
            schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                  .Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
          });
})

On the anti forgery token - for it to be present in the request, the type of the request must be POST. I am attaching an example of this too.

 

Regards,
Marin Bratanov
Progress Telerik

[Chris]

Thanks.  That works great.  but, what other settings do I need as far as amount of records to return from the controller action.  I see you're using "Enumerable.Range(1, 300).Select" in the controller action.  How many records should I be returning?  That seems to be a hard coded value of 300 records?  That's the function I'm using to actually retrieve data, but how exactly would I combine my dataset with the Enumerable.Range(1, 300) code to return what the virtualization needs?

[Chris]

Ok.  I actually tested it on my end and it's working. (It basically brings back a page or less at a time, unless it's already brought back.)  The only thing left is on the controller side.  I see that I didn't have to change my controller function.  But, your code intercepts controller calls so It doesn't actually bring back all the records, so if my entire record set is 200 records based on a search, it would only bring back 80 max (my pagesize is 80), or less, like 30, according to my network tab on my browser in some cases.  It's essentially implementing auto paging.  So, is there anything more I can do to make it more efficient, or is that it?

 

Thanks!

[Marin Bratanov]

Hi Chris,

The page size for the initial load comes from the pageSize setting, then subsequent paging operations use the forumula from the documentation: https://docs.telerik.com/kendo-ui/controls/editors/combobox/virtualization#data-and-ui-combined. Our DataSourceRequest and DataSourceResult helpers provide easy model binding and easy filtering, paging, and grouping according to the request that comes in. The .ToDataSourceResult() extension method takes the data set you have and takes and/or skips the appropriate amount of items based on the incoming request (desired page index and page size). You can do this yourself if you like, of course, and avoid using our extension method, just make sure to examine the envelope and fields used in the response to emulate them. As to the Enumerable.Range().Select() approach - it's just the most concise method I know of that creates some dummy data, you should replace it with your actual data access layer logic.

Regards,
Marin Bratanov
Progress Telerik

[Chris]

Nice article on implementing autocomplete with virtualization:

http://intrinsicinnovation.com/Articles/2019/02/16/implementing-an-autocomplete-control-on-asp-net-core-using-telerik/

 

[Chris]

 

<a href="http://intrinsicinnovation.com/Articles/2019/02/16/implementing-an-autocomplete-control-on-asp-net-core-using-telerik/">HERE</a>

 

[Chris]

Article here:  Implementing Virtualization

[Chris]

Tricky hyperlink formatter!!  Article is here:  Autocomplete