Poor Performance When Using An AutoComplete Template With HTML

[Computer]

I have an AutoComplete  control that is bound with to a DataSource with remote data. When I add a template with HTML, the list of items (~1800 items) can take a very long time, sometimes up to 7 seconds, to render, especially when using Chrome. When I remove the HTML tags it renders much faster. Also, scrolling up and down through the items with HTML in the template is very slow.

My template with HTML is pretty simple:

template: '<div style="float: left;">#: Name # </div><div style="float: right; width: 50px; text-align: right;"> #: Qty # </div><div style="float: right;"> #: kendo.toString(Cost, "c0") # </div>'

This template performances a significantly amount better:

template: '#: Name # #: Qty # #: kendo.toString(Cost, "c0") #'

I understand that a lot of rendering is being done by the browser to generate the control and the selection list, but I was wondering if there was anything that can be done to improve the speed. It displays almost instantly in FireFox. The kicker here is that it's very quick in IE as well.

Any advice is greatly appreciated.

[Georgi Krustev]

Hello,

Thank you for the code snippets and for the additional information. We prepared a simple jsBin demo in order to test the performance and verify what is causing it. The main cause of the slow opening is the client height/width check of the popup element. The interesting part is that the rendering is quick enough, but positioning of the element and especially the client height/width check is really slow. Getting width and height of an element is slow, because the browser linearly traverse all of its child and ask each of them what its height is. The more DOM elements are rendered in popup the slower will be width/height retrieving. Another interesting fact is that these properties are even slower Chrome (ticket for reference).

Unfortunately, we cannot stop checking the width and height of the popup element as we need to set its dimensions on open - items number can change because of a data source filtration and width of the input element can change if it uses an adaptive rendering. The only feasible solution in this case is to decrease the number of the rendered elements and/or simplify the content of the templates. You can increase the characters number required to initiate a data source filtering. 

Regards,
Georgi Krustev
Telerik

[Rajeev]

I have the same performance issue. I tried to load around 20,000 items in the AutoComplete control, and it took 20 seconds to load. I am loading the list of items from ViewBag

@(Html.Kendo().AutoComplete()
                          .Name("UserID")
                          .DataTextField("ADUserName")
                          .Filter("startswith")
                          .MinLength(3)
                          .Placeholder("Select User ID...")
                          .Height(300)
                          .Events(e=>e.Select("onADUserSelect"))
                          .BindTo(ViewBag.ADUsers)
                        )
After setting minlength, of course, performance improved. but when i removed the 3rd character by pressing backspace, the popup element is not hiding. Its still showing with the items starts with the 3 characters i typed earlier. Also, when i removed all the character from the Autocomplete text area, it started loading all the items in the popup, again it took 20 seconds

Is there any way i can stop loading all items when i remove all characters from Autocomplete text box ( by pressing backspace)?
Also Is there way i can hide the popup when i remove characters and make it below minLength?

[Georgi Krustev]

Hello Rajeev,

The performance issue is related to the great amount of data (20,000) that you are trying to show in the widget. What I would suggest you is to implement server filtering, thus reducing the number of the loaded items. You can increase the filter specificity setting a bigger value to the minLenth option.

Regards,
Georgi Krustev
Telerik