Datagrid Edit Issue with Hover Theme

Support
#1

Hi

I seem to have an issue with the editing of Datagrids using the Hover theme. It does not render the edit mode when you have more than 3 entities and therefore enters a state that means the datagrid is stuck and you can’t do anything further. I have attached an example project:

datagridtest.zip (399.3 KB)

How to reproduce:
1 - Enable hover theme
2 - Add 3 or more customer entities in the customer entity combined screen
3 - Enter the datagrid test screen
4 - Double click on the bottom row of the datagrid to enter edit mode
5 - Datagrid seems to enter a partial edit mode where the rest of the datagrid is frozen but it is missing the line editing fields and save/cancel buttons which means you can’t do anything further.

I’ve attached a video that show the behaviour. You can see towards the end of the video that the bottom line doesn’t go into edit mode despite me double clicking.

Thanks

#3

Hello @david.jones!

I could not reproduce your case on a test project. My result you could see on the below screenshot.
image

Your component does not have a certain height, maybe this is the problem and you need to set the height for the component (for example, 100%).

Is this problem reproduced in other themes?

Regards,
Gleb

#5

Hi @durygin

Thanks for looking into this. Unfortunately setting the height has made no difference to my version. I have set the height of the datagrid to 150px and the problem still occurs for the bottom row. I can see in your screen shot that you have name 2 and name 3 but it only looks like there are 2 records in the datagrid? I am only experiencing the problem with 3 or more records in the table.

I’ve also noticed that when fixing the height of the datagrid and having enough records to render the datagrid vertical scrollbar then moving the scrollbar then shows the editing row. I’ve attached a new video showing this:

Thanks
David

#6

My sample have 3 records, as you can see on below screenshots:

image
image

Also it works with fixed height - 150px:
image

Is this problem reproduced in other themes?

Have you got custom styles for DataGrid in your project?

Regards,
Gleb

#7

Hi @durygin

There is nothing special on the datagrids and no custom styling. I’ve tried with just a simple standard datagrid and also with creating generated columns and the problem occurs with both.

On a little more testing it appears the issue happens on all themes and appears only to be a problem in chrome. When you first go into the screen and scroll down to the bottom it seems ok, but then when you move the scrollbar its then that the problem seems to happen and then grid just starts to behaves a little strange.

I’ve also added an addEditorOpenListener which doesn’t fire when the problem occurs.

A further video showing the mouse and grid actions that I have done to generate the problem.

Thanks

#9

Hello @david.jones!

I’m sorry, but I could not reproduce your case on the test project again. I have attached a video where I try to reproduce your case, as in your video. Maybe I’m doing something wrong?

Regards,
Gleb