Progress® Kendo® UI for Vue Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 24 Sep 2020 07:50 by ADMIN
Sander
Created on: 10 Dec 2019 09:19
Category: Grid
Type: Bug Report
1
Why are all GridCell updated/rendered again when one item in the data-items array of the native grid is changed?

Goodmorning Progress,

We're working quite some time with Kendo for Vue and we are slowly migrating some old 'wrapper' grids to the new native grids. We know there are some limitations in it, because not everything is developed yet, but that wasn't a show stopper for us.

Or project uses quite a lot of data (like a google sheet) and we need it to be editable. So we implemented a native grid and a custom cell render with a VueComponent. This works perfect in case of a little amount of cells, but when there are more rows and columns it's giving us some performance issues.

First we tried virtual scrolling, but this feel 'honky-bonky' and is not even workable on a mac. Then we tried column-virtualization to minimize the rendered data, but also that didn't work. Columns aren't re-rendered when visible and its conflicting with our three locked start columns (visually data overlapping, numbers go through each other, etc).

Then our options are down to zero, so i started to investigate with some performance profiling what's happening. In our case we have 70 columns and 500 rows, this results in like 35k cells. Rendering isn't the big issue, until u start interact with the grid. Our RowClick-function sets one item in the data-items to 'inEdit' like the docs also showing. When this is happening the page freezes and i start wondering why. I found out that ALL the GridCell's (with a custom CellRender) are calling the updateRender-function. So 35k functions are called in some milliseconds and causes it to freeze. It takes around 30 sec's to get it a bit reactive, but you can understand its not workable anymore.

Our wrapper grids hadn't a single problem with handling these kids of data (no paging, no weird stuff, also custom renders for every cell)

Can you please provide me an answer why this is happening? It's possible to get access to our test-environment with the grids in action to visualize my problem a bit better. 

We have a payed license on a co-worker account (berend.haan@..).

Kind regards, 
Sander

4 comments
ADMIN
Plamen
Posted on: 19 Dec 2019 14:40

Hello Sander,

Please excuse me for the answer delay.

I have inspected the 3 issues and discussed them with our dev team:

1) This is the intended behavior inside the Grid implementation - in this case we are re-rendering it due to a change in the prop dataItems - In this case the Vue library is doing it s logic and is not updating the DOM when there are not changes in the items yet if we want to skip the render function of the cell we will have to make local data checks that would also be quite heavy in large scenarios. That is why in such cases with larger data we could recommend using our virtualization options.

2) For the Virtualization scenario a crucial part of the implementation is 'Provide the data for each page through the onPageChange event handler.' This actually means that we have to pass a new subset of data in the pageChange event so that it could be used correctly by the Kendo Grid. I have created a simple example with a mix of our demo example and added mode columns as in your case and it behavior much better. Indeed when adding more and more columns the scroll is becoming slower and slower that is why in such case we recommend adding column virtualization. 

3) In the third case there is something that we didn't document correctly and this is the colSpan prop that should be added to the custom cell and to td element. Here is an example with the colSpan prop added in the template cells - https://stackblitz.com/edit/bright-column-virtualization-demo-sg4eqa?file=index.js. We will do our best to document this prop used as soon as possible.

Having the cells visible is good yet here I observed a bug that when we scroll to the left the locked columns are moving - this is definitely a bug and I have logged it here. We will do our best to fix the issue as soon as possible.

Hope this information will be helpful. If you have further questions or you observe other unusual issues please don't hesitate to let us know.

Regards,
Plamen
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
ADMIN
Plamen
Posted on: 13 Dec 2019 13:54

Hello,

Thank you for providing these samples.

We will need some time to research them and will get back to you as soon as we have a deeper information about each one of them.

Please excuse us for this answer delay in advance.

Regards,
Plamen
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
Sander
Posted on: 11 Dec 2019 15:23

Hi Palmen,

Glad to hear the feedback is appreciated. We're still really happy with everything what kendo did for our application, but if we can make it even better that should be awesome. I did some copy and pasting this afternoon and i came up with 3 stackblitzes that are perfectly showing our issues.

Full grid without virtualization (scroll or column) - 500 data items: Full grid
Our problem begins when clicking a row and then it sets this item 'inEdit', the grid freezes (takes around 5 sec). All rendered GridCells are 're-rendered' as told in my first comment.

A bit smaller grid with scroll virtualization - 100 data items - page 50: Scroll virtualization
Just scroll down and u see that the scrolling feels 'honky-bonky'.
Small grid with column-virtualization: 20 data items - no paging: Column virtualization 
Scroll to the right and the column outside the viewport of the width that is defined on the grid (not counting the locked columns) aren't rendered any more.

I hope these demo's give u enough data/information so the native grid can be improved and become more worth to the community.

If there still are some questions, please contact me again :)

Kind regards,
Sander

 

ADMIN
Plamen
Posted on: 11 Dec 2019 12:39

Hello Sander,

Thank you for getting in touch with us.

We are doing our best to improve our Vue Native Grid so this kind of feedback is greatly appreciated.

First of all I would like to ask you for a bit details for the virtual scrolling and column-virtualization scenarios since in general cases they would be the usually the premier suggestion for such cases with large grid data. Would you please try to elaborate a little bit both cases that you observe by modifying  so of our demos in stackblitz example.

As for the last issue - please share the declaration of the component so we could replicate the issue at our side or isolate it with some dummy data in a stackblitz example so we could replicate the issue and be more helpful with a possible solution,

I will be looking forward for your reply.

Regards,
Plamen
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
Create an account Log In
View
Type
Status
Category