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

Delay when clicking drop down arrow (instead of typing)

3 Answers 85 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
Shea
Top achievements
Rank 1
Shea asked on 07 Nov 2013, 06:33 PM
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

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 11 Nov 2013, 12:27 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Leon
Top achievements
Rank 1
answered on 25 Sep 2014, 10:01 AM
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.

0
Kiril Nikolov
Telerik team
answered on 25 Sep 2014, 10:58 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
ComboBox
Asked by
Shea
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Leon
Top achievements
Rank 1
Share this question
or