Delay when clicking drop down arrow (instead of typing)

[Shea]

I have a grid which uses a combo box as an editor for a few columns. Currently there are about 1350 items.
The performance of the drop down is fine if you just start typing. But if you decide to simploy click the down arrow, there is about a 1 second delay which is definitely enough that users have complained about it.

I have tried using autoBind: true, but there are two issues with that. 1. that any subsequent time the dropdown is shown, it just shows [Object object] instead of teh ExtendedItemName which it does correctly the first time, and all the time when autoBind is false. 2. Is that autoBind doesn't seem to speed anything up.

Because autoBind doesn't speed anything up, I don't think this is a network issue. Also the fact that even with autoBind off, the data is only read from the server the first time you drop it down. But there is a delay every time you drop the combo down.

Any ideas?

    self.purchase_items_src = new kendo.data.DataSource({
        transport: {
            read: {
                url: GridCommon.ITEMS_HANDLER_URL + "/GetPurchaseItems",
                dataType: "json",
                type: "GET"
            }
        },
        error: GridCommon.showCallBackError
    });

//.....

    self.itemDropDownEditor = function(container, options) {

        $('<input required data-text-field="ExtendedItemName" data-value-field="ItemName" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoComboBox({
                serverFiltering: false,
                placeholder: GridCommon.emptyText,
                dataSource: self.purchase_items_src,
                filter: "contains",
                change: function(e) {
                    options.model.set('ItemID', e.sender.dataItem().ItemID);
                    options.model.set('ItemName', e.sender.dataItem().ItemName);
                }
            });
    };

~Shea M

[Kiril Nikolov]

Hi Shea,

The delay of 1 second when loading more than 1300 items in the ComboBox widget is expected, this is due to the fact that you are adding a lot of elements to the DOM which is an operation that consumes a lot of resources for rendering.

I have tested a ComboBox with locally loaded 1350 items, and the delay is observable when tested on old versions of Internet Explorer, while on newer versions of the most major browsers, the delay does not exists.

http://jsbin.com/EpURefu/2
 
Regards,
Kiril Nikolov
Telerik

[Leon]

Hi Shea,

I have similar issue, I have grid as below with inline editing
            @(Html.Kendo().Grid<PoliceStation>()
              .Name("grid")
              .Columns(columns =>
                           {
                               //Give access to command as per access role
                               @Html.GiveCommandsAsPerRoles(Ajax, columns, ControllerName.PoliceStations);

                               columns.Bound(d => d.PoliceStationName).Title(Label.PoliceStationName);
                               columns.ForeignKey(p => p.ProvinceID, SelectListRepository.Province("")).Title(Label.ProvinceName).Width(400);
                               columns.Bound(d => d.IsActive).Title(Label.Status)
                                   .ClientTemplate(Html.SetStatusClientTemplate("IsActive", ControllerName.PoliceStations, "ChangeStatus",
                                    "policeStationID= #= PoliceStationID #", "Police Station", "false", "#= PoliceStationID #", "grid"))
                                   .HtmlAttributes(CommenSetting.StatusColumnStyle)
                                   .HeaderHtmlAttributes(CommenSetting.StatusColumnStyle);

                           })
              .Editable(editable => editable.Mode(GridEditMode.InLine))
              .HtmlAttributes(new { @class = "inlineGrid" })
              .Events(grid => grid.Edit("edit"))
              .Events(grid => grid.SaveChanges("DataBound"))
              .Events(e => e.DataBound("DataBoundWithEditAccessRights"))
              .Selectable()
              .DataSource(dataSource => dataSource
                                            .Ajax()
                                            .Model(model => model.Id(d => d.PoliceStationID))
                                            .Events(events => events.Error("onError"))
                                            .Create(update => update.Action("PoliceStationsCreate", ControllerName.PoliceStations))
                                            .Read(read => read.Action("PoliceStationsRead", ControllerName.PoliceStations))
                                            .Update(update => update.Action("PoliceStationsUpdate", ControllerName.PoliceStations))
                                            .Destroy(update => update.Action("PoliceStationsDestroy", ControllerName.PoliceStations))
              ))
While adding new record the drop come for Province but when I click on dropdown it took delay of 2-3 seconds. There are only 9 items in drop down and for 9 items this delay is not acceptable.
FYI : Kendo.MVC Version 2012.2.913.340.
Any help is highly appriciated.

[Kiril Nikolov]

Hi Leon,

As the issue that you are facing is not directly related to the current forum topic, I would like to kindly ask you to open a separate support request, that described the issue that you are having, so we can assign the people that can help you best with the issue that you are facing.

Thank you very much for your cooperation.

Regards,
Kiril Nikolov
Telerik