Issues while using the RadAutoCompleteBox with 12000+ records in desktop and mobile

[Hagai]

Hi,

 

I'm trying to use the RadAutoCompleteBox under one of our asp.net webforms and I'm having an issues,

We have a large set of data with more then 12000 records.

At first i was trying to load all the records and bind it to the control on each page load on the server side, that was working quite good on desktop browsers but in mobile browsers it was awful as the browser can't handle an 12000 html tags and javascript data rendered by the control.

Also it came up that the page weight around 4.5MB which is a lot even for a desktop browser.

So I was trying to follow the documentations at https://docs.telerik.com/devtools/aspnet-ajax/controls/autocompletebox/data-binding/binding-to-web-service and write a web service which will load all my records and then filter them according to the user input and then return the filtered results to him at this point after struggling with the webservice code as I couldn't use the AutoCompleteBoxData  and i had to write my own context class and data item class, I was able to see that the webservice does works and returns results according  to the user input but the control doesn't render the results and It's throwing exception at the browser console:

ScriptResource.axd?d=gx6HX6zsgt8dTK4PwXx5XQYUT2NQp8XGw7ix_E9duNwntsiadC0i47_Y_n44_iaA_chcE_PxzUYTm4J_holFgDumTzG2bqQ7o7_kRRnY7pvlCD1myVWH30Yf1CYvPbR-MdO_Xm0ePA2SCysVzbC9ZSz9resjEas1VXQLPGqpXxk1&t=495c3101:379 Uncaught TypeError: Cannot read property 'length' of undefined
    at c.RadAutoCompleteBox._populateDropDown (ScriptResource.axd?d=gx6HX6zsgt8dTK4PwXx5XQYUT2NQp8XGw7ix_E9duNwntsiadC0i47_Y_n44_iaA_chcE_PxzUYTm4J_holFgDumTzG2bqQ7o7_kRRnY7pvlCD1myVWH30Yf1CYvPbR-MdO_Xm0ePA2SCysVzbC9ZSz9resjEas1VXQLPGqpXxk1&t=495c3101:379)
    at c.RadAutoCompleteBox._loadDropDownItems (ScriptResource.axd?d=gx6HX6zsgt8dTK4PwXx5XQYUT2NQp8XGw7ix_E9duNwntsiadC0i47_Y_n44_iaA_chcE_PxzUYTm4J_holFgDumTzG2bqQ7o7_kRRnY7pvlCD1myVWH30Yf1CYvPbR-MdO_Xm0ePA2SCysVzbC9ZSz9resjEas1VXQLPGqpXxk1&t=495c3101:248)
    at c.RadAutoCompleteBox._onWebServiceResponse (ScriptResource.axd?d=gx6HX6zsgt8dTK4PwXx5XQYUT2NQp8XGw7ix_E9duNwntsiadC0i47_Y_n44_iaA_chcE_PxzUYTm4J_holFgDumTzG2bqQ7o7_kRRnY7pvlCD1myVWH30Yf1CYvPbR-MdO_Xm0ePA2SCysVzbC9ZSz9resjEas1VXQLPGqpXxk1&t=495c3101:319)
    at Array.<anonymous> (MicrosoftAjax.js:6)
    at MicrosoftAjax.js:6
    at Telerik.Web.UI.WebServiceLoader._raiseEvent (ScriptResource.axd?d=TDVjdgRbdvNAY3tnbizUcCPhg68u2C6oYtBzjbMl5nb0yrfrLw7TVxW4YUPW6jKd1bpl1qHFaEPlDe1ep-4WFHRB2fxZlyrMYhIuGG2rls_HAViVcHRfkNKViD-cNk930&t=495c3101:1218)
    at Telerik.Web.UI.WebServiceLoader._onWebServiceSuccess (ScriptResource.axd?d=TDVjdgRbdvNAY3tnbizUcCPhg68u2C6oYtBzjbMl5nb0yrfrLw7TVxW4YUPW6jKd1bpl1qHFaEPlDe1ep-4WFHRB2fxZlyrMYhIuGG2rls_HAViVcHRfkNKViD-cNk930&t=495c3101:1213)
    at MicrosoftAjax.js:6
    at Array.x (MicrosoftAjax.js:6)
    at MicrosoftAjax.js:6
_populateDropDown @ ScriptResource.axd?d=gx6HX6zsgt8dTK4PwXx5XQYUT2NQp8XGw7ix_E9duNwntsiadC0i47_Y_n44_iaA_chcE_PxzUYTm4J_holFgDumTzG2bqQ7o7_kRRnY7pvlCD1myVWH30Yf1CYvPbR-MdO_Xm0ePA2SCysVzbC9ZSz9resjEas1VXQLPGqpXxk1&t=495c3101:379
_loadDropDownItems @ ScriptResource.axd?d=gx6HX6zsgt8dTK4PwXx5XQYUT2NQp8XGw7ix_E9duNwntsiadC0i47_Y_n44_iaA_chcE_PxzUYTm4J_holFgDumTzG2bqQ7o7_kRRnY7pvlCD1myVWH30Yf1CYvPbR-MdO_Xm0ePA2SCysVzbC9ZSz9resjEas1VXQLPGqpXxk1&t=495c3101:248
_onWebServiceResponse @ ScriptResource.axd?d=gx6HX6zsgt8dTK4PwXx5XQYUT2NQp8XGw7ix_E9duNwntsiadC0i47_Y_n44_iaA_chcE_PxzUYTm4J_holFgDumTzG2bqQ7o7_kRRnY7pvlCD1myVWH30Yf1CYvPbR-MdO_Xm0ePA2SCysVzbC9ZSz9resjEas1VXQLPGqpXxk1&t=495c3101:319
(anonymous) @ MicrosoftAjax.js:6
(anonymous) @ MicrosoftAjax.js:6
_raiseEvent @ ScriptResource.axd?d=TDVjdgRbdvNAY3tnbizUcCPhg68u2C6oYtBzjbMl5nb0yrfrLw7TVxW4YUPW6jKd1bpl1qHFaEPlDe1ep-4WFHRB2fxZlyrMYhIuGG2rls_HAViVcHRfkNKViD-cNk930&t=495c3101:1218
_onWebServiceSuccess @ ScriptResource.axd?d=TDVjdgRbdvNAY3tnbizUcCPhg68u2C6oYtBzjbMl5nb0yrfrLw7TVxW4YUPW6jKd1bpl1qHFaEPlDe1ep-4WFHRB2fxZlyrMYhIuGG2rls_HAViVcHRfkNKViD-cNk930&t=495c3101:1213
(anonymous) @ MicrosoftAjax.js:6
x @ MicrosoftAjax.js:6
(anonymous) @ MicrosoftAjax.js:6
completed @ MicrosoftAjax.js:6
_onReadyStateChange @ MicrosoftAjax.js:6
XMLHttpRequest.send (async)
executeRequest @ MicrosoftAjax.js:6
executeRequest @ MicrosoftAjax.js:6
invoke @ MicrosoftAjax.js:6
Sys.Net.WebServiceProxy.invoke @ MicrosoftAjax.js:6
invokeMethod @ ScriptResource.axd?d=TDVjdgRbdvNAY3tnbizUcCPhg68u2C6oYtBzjbMl5nb0yrfrLw7TVxW4YUPW6jKd1bpl1qHFaEPlDe1ep-4WFHRB2fxZlyrMYhIuGG2rls_HAViVcHRfkNKViD-cNk930&t=495c3101:1205
loadData @ ScriptResource.axd?d=TDVjdgRbdvNAY3tnbizUcCPhg68u2C6oYtBzjbMl5nb0yrfrLw7TVxW4YUPW6jKd1bpl1qHFaEPlDe1ep-4WFHRB2fxZlyrMYhIuGG2rls_HAViVcHRfkNKViD-cNk930&t=495c3101:1198
_doLoadOnDemandFromWebService @ ScriptResource.axd?d=gx6HX6zsgt8dTK4PwXx5XQYUT2NQp8XGw7ix_E9duNwntsiadC0i47_Y_n44_iaA_chcE_PxzUYTm4J_holFgDumTzG2bqQ7o7_kRRnY7pvlCD1myVWH30Yf1CYvPbR-MdO_Xm0ePA2SCysVzbC9ZSz9resjEas1VXQLPGqpXxk1&t=495c3101:312
_requestItems @ ScriptResource.axd?d=gx6HX6zsgt8dTK4PwXx5XQYUT2NQp8XGw7ix_E9duNwntsiadC0i47_Y_n44_iaA_chcE_PxzUYTm4J_holFgDumTzG2bqQ7o7_kRRnY7pvlCD1myVWH30Yf1CYvPbR-MdO_Xm0ePA2SCysVzbC9ZSz9resjEas1VXQLPGqpXxk1&t=495c3101:238
(anonymous) @ ScriptResource.axd?d=gx6HX6zsgt8dTK4PwXx5XQYUT2NQp8XGw7ix_E9duNwntsiadC0i47_Y_n44_iaA_chcE_PxzUYTm4J_holFgDumTzG2bqQ7o7_kRRnY7pvlCD1myVWH30Yf1CYvPbR-MdO_Xm0ePA2SCysVzbC9ZSz9resjEas1VXQLPGqpXxk1&t=495c3101:143
setTimeout (async)
query @ ScriptResource.axd?d=gx6HX6zsgt8dTK4PwXx5XQYUT2NQp8XGw7ix_E9duNwntsiadC0i47_Y_n44_iaA_chcE_PxzUYTm4J_holFgDumTzG2bqQ7o7_kRRnY7pvlCD1myVWH30Yf1CYvPbR-MdO_Xm0ePA2SCysVzbC9ZSz9resjEas1VXQLPGqpXxk1&t=495c3101:143
_onKeyUp @ ScriptResource.axd?d=gx6HX6zsgt8dTK4PwXx5XQYUT2NQp8XGw7ix_E9duNwntsiadC0i47_Y_n44_iaA_chcE_PxzUYTm4J_holFgDumTzG2bqQ7o7_kRRnY7pvlCD1myVWH30Yf1CYvPbR-MdO_Xm0ePA2SCysVzbC9ZSz9resjEas1VXQLPGqpXxk1&t=495c3101:576
keyup @ ScriptResource.axd?d=gx6HX6zsgt8dTK4PwXx5XQYUT2NQp8XGw7ix_E9duNwntsiadC0i47_Y_n44_iaA_chcE_PxzUYTm4J_holFgDumTzG2bqQ7o7_kRRnY7pvlCD1myVWH30Yf1CYvPbR-MdO_Xm0ePA2SCysVzbC9ZSz9resjEas1VXQLPGqpXxk1&t=495c3101:96
dispatch @ ScriptResource.axd?d=mbGZm65DzNC0tMTq0ElbcdAiUZaT4KXW5WLNHMsqoN3_HIOWMlRGNY-g0q24C4ElZfgcsVJscAbbeXFWsjhVDL4pH7G1ZhFNGhz0p2-BsI_kS-EI0TXwBhRC6hM3ftpjZQFWabGVNA5e5NSEAEcArw2&t=495c3101:3
r.handle @ ScriptResource.axd?d=mbGZm65DzNC0tMTq0ElbcdAiUZaT4KXW5WLNHMsqoN3_HIOWMlRGNY-g0q24C4ElZfgcsVJscAbbeXFWsjhVDL4pH7G1ZhFNGhz0p2-BsI_kS-EI0TXwBhRC6hM3ftpjZQFWabGVNA5e5NSEAEcArw2&t=495c3101:3

 

the application is written in .net 4.8 and I'm using Telerik controls version 2019.3.1023.45

Can you advise what to do, how to solved it?

Thanks in advanced,

Hagai.

 

[Attila Antal]

Hi Hagai, 

That long error message indicates that there's an exception generated on the server but it's hidden by AJAX. To find out more about this error, disabling/removing AJAX from the Page would be the answer, see Get more descriptive errors by disabling AJAX

I can't see the complete implementation at your side, but if AJAX is present, please remove it and test the application again. 

In any case, the RadAutoCompleteBox is bound on the client-side using WebServices, thus AJAX is not needed for it. The WebService itself implements AJAX uses that to post/receive requests to and from the server without refreshing the page.

Regards,
Attila Antal
Progress Telerik