Log in to AnswerLog in to Follow
Jack McMillan
29Views
7Comments
Solved
[Data Grid Reactive] Forcing GUI Refresh after manually updating underlying cell binding value
Question
DataGrid
Reactive
Forge
Data Grid Reactive
Forge component by Bruno Martinho
Application Type
Reactive

Hi there,

Firstly I wanted to thank the entire team who has worked on this forge component as the functionality that it provides out of the box is very powerful, great stuff!

I am currently in the process of attempting to build some extra functionality and get the grid working how I require for my use case.

My use case requires me to have a total sum column at the end of the grid, when any number cell in the row is updated I wanted to update the sum total column for that row. So far I have stepped through chrome debugging in the page and reading through the GridFramework.JS in the component itself.

I have attempted to add a couple of extra lines on the cellEditEndingHandler function to set the value in the underlying JSON data for the total sum. This has been successful, however the new value is not reflected in the GUI. I assume there's a listener or a series of functions called to update the grid and reflect the data correctly.

I was hoping that someone could save me some time and point me in the right direction. If I am able to update the underlying JSON data for the binding value for total sum column, what other JS functions in the GridAPI or GridFramework.js need to be called to achieve my outcome and have the underlying JSON binding value updated and reflected in the GUI?

Or is there any easier way to achieve my goal?  Thanks again and look forward to your response.

Kind Regards,

Jack McMillan

0
0
on 29th Jan

Seems I may have solved this one myself by calling the following build function. While debugging through chrome console it has reloaded the GUI as desired.

GridAPI.GridManager.GetActiveGrid()._features.dirtyMark.build()


0
0
on 29th Jan

Hello Jack,

First of all, sorry for not answering early and you had to figure out a solution by yourself.

I've seen that you have been exploring our API and I have to say that I'm really happy that you manage to pursue figure it out.

We are currently working on new features that will help to achieve your goal with OutSystems and not using JS.

From what I understood you have a calculated cell that actually depends on the values of other cells in the same row, like a sum, right?

With what is being planned, what do you think of an OS event that is triggered when a cell is edited and a client action that allows you to refresh a row with new data values?

Do you think we can reach out to you while we are in solution design and check if the solution would meet your requirements?

Thanks,

Bruno Martinho


1
0
on 29th Jan

Hi Bruno,

Not a problem at all, I posted the question and managed to find the solution after taking a small drink break at work.

Yes sure thing, happy to speak to you. This was only one of my requirements, I kept it to the one as I didn't want to bloat the post and have figured most of my own work arounds / hacks to get what i need done for POC stage.

I've shot you a message, thanks.

Kind regards,

Jack McMillan


0
0
on 29th Jan

Hi Jack, 

We're having similar requirements. Are you able to share more details about the changes you made to the code to implement this functionality of updating the "total" column both in the GUI and the Grid Data model. Thanks much!

0
0
on 6th May

Hi Stephen,

Hope you're doing well. Apologies for the delayed response!

It has been a while since I have been working with this component but from memory this is how I approached it.

By reading through the GridFramework script in the Outsystems folder in the Scripts section of the DataGridReactive module I was able to gain a better understanding of the underlying javascript for the component. 

I then used Chrome debugging to reverse engineer some of the events and to gain a better understanding of the underlying JSON that drives the component and to pinpoint the cell edit event handlers.

You can implement some custom logic into the 'cellEditEndingHandler' function in the GridFramework script file to loop through the rows in the grid & get their properties. If you give each column meaningful properties you can use this to drive the logic. For example an AddToSumTotalBoolean can be used to identify if a column value needs to update the total column value or even subtract from this value with another property like SubtractFromSumTotalBoolean.

What I used inside in my logic to get rowdata: const rowData = e.getRow().dataItem;

What I used to get properties for row: const dataProperties = Object.getOwnPropertyNames(rowData);

You can use these and implement your own logic.

I hope this helps and all the best with your efforts moving forward!

Kind regards,

Jack McMillan

0
0
on 26th May

Hello,

We also have similar requirement. 

>>when a cell is edited and a client action that allows you to refresh a row with new data values? 

It would be nice feature if this feature will be added

0
0
on 6th May

Hi Ayumi,

Hope you're well and apologies about the delayed response!

If you have a look at my answer above I have gone into some more info on how I achieved the outcome above. Your use case might be slightly different but I hope it helps you move closer to your goal.

Good luck with your efforts moving forward!

Kind regards,

Jack McMillan

0
0
on 26th May
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.