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

selecting rows in kendo-grid for vue, is slow

5 Answers 467 Views

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

John asked on 08 Nov 2018, 12:14 PM

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

5 Answers, 1 is accepted

answered on 09 Nov 2018, 01:00 PM

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

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 15 Nov 2018, 06:13 AM

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

Asked by

Answers by