Grid with :row-render="CustomRow" doesn't update correctly

[Vincent]

I'm trying to make a grid with custom rows by passing a custom vue row component to the :row-render prop like so:


Lsjacl (forked) - StackBlitz

 

However there's a problem when I'm inserting new rows at the top. It seems the row that's newly created re-uses the row data from the row below it instead of the completely blank data a new row starts out with. When I insert a row at the bottom of the list this problem doesn't occur and the values are all completely blank. 


You can reproduce this issue with the following steps:

1: open the stackblitz.

2: click on 'add row to end'.

3: see that there's a newly created row at the bottom of the list. 

4: in the field meta it says the initalValue is null

5: now add a row to the beginning of the list with the 'add row to beginning' button

6: The field meta says it's initialValue is 'Lemon' the same value as the row below it. 


I'm figuring this has something to do with the loop that's generating all rows using generic indexes instead of unique ID's as described in this video:

https://youtu.be/-6fO2qUmf7I?t=412 


Is there a way to fix this so I can insert the row at the beginning of the list and have it start out as a completely fresh vue component?

[Petar]

HI Vincent,

I've tested the provided example by removing the usage of the "vee validate" methods in the TextCell component.

Here is the StackBlitz project I tested. In it, you will see that a new item is added when we press the "Add row to beginning". The new item is the expected newDataItem record defined in the main.vue file.

Based on the above tests, I would assume that the issue that is replicable in the project from your post is related to the "vee" package. Of course, the above is only an assumption based on the described above tests. What you can try is to use a different validator or use the approach demonstrated in our Grid Validation demo.

I hope the above details will help you achieve what you need in your project.

Regards,
Petar
Progress Telerik

[Vincent]

Sorry I think I wasn't clear enough with my original question. 

The problem isn't that vee validate gets it wrong. the problem is that the components are updated when they shouldn't be. 
This is is easily observed in this new simpler example I made:

simpler example - StackBlitz

 

Every time you add a row to the top you'll see a console.log('updated') appear for every row underneath it. This shouldn't happen. Imagine if we had 100 rows each with very expensive logic inside of them. Everytime you add a new row all rows below it are re-calculated, this really slows down the UI when you add a new row. 

8 Tips For Writing Better V-For Loops With Vue 3 - YouTube

 

If each row had a completely unique, non-index key the row inserted at the top would be a completely new Vue component instead of the same Vue component that was previously at index 0

[Petar]

Hi, Vincent. 

Thank you for the additional details. The reported behavior has been logged as a bug which public thread can be followed on this link to our Feedback portal.

I cannot say exactly when the bug will be fixed but I believe it won't take us much time. You can follow the feedback portal item and once there is an update in its status, you will be notified. 

I've updated your Telerik points as a sign of gratitude for reporting the issue. 

Let me know if you have any other questions related to the current ticket.