Editable Data Grid Custom Component

UI Builder
1

Does anyone have an example I could reference for the custom data grid component with the editable property turned on with any inline changes being written to a database table and updated to other users in realtime?

I’d like to see how cell changes are captured and then written back to the database table. I’ve seen how this is done in some of the other guides with forms but can’t find a good video or doc for doing this from an inline table edit using the custom component based on AG Grid.

Thanks!

2

Hi @James_Hereford
I checked and currently there is no such possibility in the Data Grid custom component, but I created a ticket for adding an event which will help to add all the changes in the Data Grid cells to the table in the database. We will let you know when it will be implemented.

Regards,
Zahar

3

Thanks Zahar, I really appreciate it! Just so I understand correctly, what is the function of the ‘editable’ property in the current implementation if there’s no way to save the edit back into the table?

Real-time table editing is probably the primary feature requirement for my client so I may need to find a workaround pretty quickly.

4

Similarly, could you advise on how to turn on the ability to add/remove rows and set some of the other grid properties available in AG Grid such as autosizing?

6

The ‘editable’ property allows you to edit the content in the data grid, but not save the changes to the database table. As for me, it doesn’t really make sense, so we need to add the ability to save changed content.
About the workaround, I can offer such an option

7

Isn’t autosizing enabled by default, or have I misunderstood?
About add/remove rows, you can watch the video above and perform similar manipulations for adding and removing. In general about adding new properties, if you need any specific properties, we will create a ticket for that.

Regards,
Zahar

8

Thanks Zahar. I think it appears to autosize all columns equally. I was hoping to set the property on a couple columns to make them fit their contents. I ended up going with fixed widths for a few.

Thank you for the potential workaround as well. I will take a look at that and get back to you.

1 Like
9

Hey Zahar, thank you for this workaround. Is the reason you had to create the input box as an intermediary because there is no “on cell change” event, only on cell click?

Unfortunately in my use case I won’t be able to have a separate box for typing the changes in. The solution ideally would be inline and would register the cell change when someone hits enter or mouses away after changing the value. Alternatively it could be via a ‘pencil’ icon over to the side that pops up an edit interface either in line with the table or in a model popout.

10

Yes, I think that the “on cell change” event will solve this issue

11

Thanks! I’ll chat with Vlad as well but please keep me posted on the timeline for any feature additions here.

1 Like