Delay when clicking drop down arrow (instead of typing)

4 posts, 0 answers
  1. Shea
    Shea avatar
    58 posts
    Member since:
    Feb 2013

    Posted 07 Nov 2013 Link to this post

    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
  2. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 11 Nov 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Leon
    Leon avatar
    21 posts
    Member since:
    Aug 2012

    Posted 25 Sep 2014 Link to this post

    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.

  5. Kiril Nikolov
    Admin
    Kiril Nikolov avatar
    2566 posts

    Posted 25 Sep 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready