selecting rows in kendo-grid for vue, is slow

[John]

Hello
We are developing a module whereby what is selected on one grid filters a second grid. As part of this we need to enable multi-select on the master grid. 

I have two separate scripts for getting the data item of the selected grids, but both seem a little slow, ~1 sec to ~3 secs.

The scripts we are testing are:

onChange: function(ev) {
      var that = this;
      var selected = $.map(ev.sender.select(), function(item) {
        var tr = $(item).closest('tr');
        var grid = that.$refs.itemsGrid.kendoWidget();
        var data = grid.dataItem(tr);
        return data.itemNumber;
      });
      this.$root.$emit('item-grid-selected',selected);
    },

change: function(e) {
    var selectedRows = e.sender.select();
    var selectedDataItems = [];
    for (var i = 0; i < selectedRows.length; i++) {
      var dataItem = e.sender.dataItem(selectedRows[i]);
      selectedDataItems.push(dataItem.name);
    }
    console.log(selectedDataItems);// contains all selected data items
    this.$root.$emit('item-grid-selected',selectedDataItems);
  },

 

with the grid code of:

<kendo-grid ref="itemsGrid"
                  :data-source="items"
                  v-on:databound="autoFitColumns"
                  :sortable-mode="'single'"
                  :sortable-allow-unsort="true"
                  :groupable="true"
                  :pageable="false"
                  :page-size="20"
                  :pageable-page-size="10"
                  :pageable-always-visible="false"
                  :filterable-mode="'row'"
                  :selectable="'multiple'"
                  :toolbar="[]"
                  :editable="false"
                  :server-paging="false"
                  :column-menu="true"
                  :scrollable-horizontal="true"
                  v-on:change="change"
                  v-on:save="grid_save">
    </kendo-grid>

Without any event raised on the change event of the grid, the selection following a click of any rows in the grid is seemingly instant. Just for info, there are only three rows in this table, so it is not because there is a lot to go through.

 

Can you make any suggestions for speeding this up?

Regards
John

[John]

Please note that they are alternative scripts, that I am running individually to see if there is any speed improvement/difference

[Ianko]

Hello John,

Such a slow performance might be caused by recursive update of the Grid component. For example, if the data is changing during the mentioned event. I noticed that the toolbar prop is defined as empty array. Note that this could be a reason for not-intended update of the component. You can check out this issue here for more details: https://github.com/telerik/kendo-ui-core/issues/3952/. Generally, you can try removing this prop or moving the empty array to a variable in the data field. 

If that does not solve the case, it would be great if you can provide a simple example of the case so that I can take a look at the sample and understand the case better.

Regards,
Ianko
Progress Telerik

[John]

Hi Ianko

Removing the empty toolbar prop has made no difference to the speed, and it looks like the problem is not with how I have configured the grid.

It seems that using the global event bus is causing problems as the the time it takes for the event that is fired from the Listener to complete is blocking the event completing on the component that emitted the event!

I realise that this is not your remit

Regards 

John

[John]

So, on further investigations using console.log to map and performance test the vue.js code,  that code is completing fairly promptyl. The bottleneck was then found to be the way that the grid is recalculating the style during the process of destroying, databinding and filtering the grid. Investigating via the performance tab of Chrome's DevTools revealed a Forced reflow in Kendo.core.js?0f57:1885.

Is there anything we can do to either disable the Forced Reflow?

[Ianko]

Hello John,

As stated earlier, most probably, it is some sort of redundant redraw operation of the widget caused by data changes. However, without any exact details what might be causing this I am unable to properly suggest a way to tackle this. Disabling generally the redrawing of the Grid would cause a side effect and UI will stop being reactive to data. 

Therefore, I suggest you creating a very simple, locally runnable sample that would enable me to locally examine the described behavior. 

Regards,
Ianko
Progress Telerik