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

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

2 Answers 181 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Adam
Top achievements
Rank 1
Adam asked on 07 Aug 2013, 03:34 PM
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!

2 Answers, 1 is accepted

Sort by
0
Helga
Top achievements
Rank 1
answered on 30 Oct 2013, 02:16 PM
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.
0
Nani
Top achievements
Rank 2
answered on 30 Oct 2013, 02:35 PM
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 .
Tags
ComboBox
Asked by
Adam
Top achievements
Rank 1
Answers by
Helga
Top achievements
Rank 1
Nani
Top achievements
Rank 2
Share this question
or