ComboBox with AutoComplete crashes browser when user drops down combo - 20K records

[Adam]

ASP.Net MVC 

I have a combo box that is bound to a controller action that sends back json data. It can have anywhere from 20k to 40k rows. 

If the box is blank and the user hits the down arrow, it locks up and crashes the browser.

If the user types 3 letters which triggers the autocomplete, it suggests the right answers. But again, if the user hits the down arrow, it crashes. If the user clears the text box and tries to search again, behavior gets very slow and eventually crashes. 

The performance of this is absolutely miserable. 

I have a constant datasource. I want it to be loaded once into the page so that no traffic needs to happen after the initial load. But, I'm unsure if I even want that because I can't seem to stop the Open() event from causing a problem. Ideally, if the box is blank, I don't want anything to show up in the drop down, which defeats the binding purpose. I've played with serverfiltering (true) and now the box locks up immediately and won't even make the call. 

The main problem: Bind to a source of 20-40k rows of below and hit the drop down arrow on the combo box: crash. How do I fix that? And, how can I set a page variable to my json result so I don't have to make the network call over and over each time someone types data into the box? 

Data looks like an array of these:
{"Id":9024,"Name":"My Data Display Text"}

Code:
<%: Html.Kendo().ComboBox().Name("myId")
                .DataTextField("Name")
                .DataValueField("Id")
                .DataSource(ds => ds.Read("MyList", "App"))
                .AutoBind(false)
                .MinLength(3)
                .Suggest(true)
                .Filter("startswith")
                .HtmlAttributes(new {style = "width:200px;height:24px;font-size:12px; padding 1px;"})           
                %>

[Authorize]
        public ActionResult MyList()
        {
            if (Session["myList"] == null)
            {
                Session["myList"] = this.Db.ViewMyLists.OrderBy(d => d.Name).ToList();
            }
            return Json((List<ViewMyList>)Session["myList"], JsonRequestBehavior.AllowGet);
        }



Update #2: I've also tried binding to the OnOpen event and checking the length of the textbox based on another post on the forum. I used the following:
.Events(e => { e.Open("onOpen2"); })

        function onOpen2(e) {
            alert('hi');
        };

The browser immediately locks up, and after 60 seconds or so, the javascript alert finally pops up. Even if I could prevent the user from dropping down the combo, its only hiding the error anyway and the freeze still occurs. Looking for some serious help here!

[Helga]

Hello,
i think the "ToList()" in your Controllerfunction makes it very slow.
I've solved it by this way:

@(Html.Kendo().ComboBox()
    .Name("BaKunde")
    .DataSource(source =>
      {
          source.Read(read =>
          {
              read.Action("GetKunden", "BaKunde");
          });
      })
    .Delay(0)
    .MinLength(3)
   .Filter(FilterType.Contains)
    .Suggest(true)
    .AutoBind(false)
    .DataTextField("Nama")
    .DataValueField("Cuno")
    .Events(e => e
        .Change("baKunde_change")
    )

)

public ContentResult GetKunden()
        {
            var bakunde = db.BaKunde.Where(k => k.Kcun.Equals(1)).OrderBy(k => k.Nama).Select(k => new {k.Cuno, k.Kcun, k.Nama});

            var serializer = new JavaScriptSerializer();
            serializer.MaxJsonLength = Int32.MaxValue;

            var result = new ContentResult();
            result.Content = serializer.Serialize(bakunde);
            result.ContentType = "application/json";
            return result;
        }

Just select the Fields you really need for more performance.

Hope this helps a lot.

[Nani]

I don't  is it correct to load 20k records into browser.  Why don't choice Load on demand. 

I am also searching for solution for LoadonDemand for Kendo UI asp.net mvc combo box.

Could you please provide solution for LoadonDemand .