[OutSystems Data Grid] Issue with custom JavaScript after upgrading to version 2.6.2
data-grid-reactive
Reactive icon
Forge component by Platform Maintenance
Application Type
Reactive
Service Studio Version
11.14.8 (Build 58515)
Platform Version
11.14.0 (Build 33133)

Hello!

I'm testing the new version of the component and I noticed that having a custom JavaScript code that, as an example, acts upon the style of a certain cell is causing issues in the data grid. I can't open the column picker menu, I can't check the checkboxes, I can't edit the cells, etc.

Here's the code that I have as an example:

And here's what happens in the data grid:

Until now, I've found that some divs are always updating and it looks like that is what is causing the issue:

This was not happening in the previous version (2.6.1) and is currently impacting the project I'm working on.

Does anyone has any idea how I can fix this issue?

You can find attached the example I'm describing.

Test262.oml

mvp_badge
MVP
Solution

Hi @André Dinis,

The problem, as you have notice is an infinite cycle, or close to it.

The reason for that is that the API that you're using, GridAPI.Styling.SetCellCssClass(...) requires the grid to be invalidate (as you can see in line 46), so that the changes become visible. Worth notice, that the this API was not designed with your scenario in mind (as in, using it with the event updatingView).

----

A possible workaround, is for you not to use the API and instead the framework internal mechanism: GridManager.GetGridById(gridID).features.cellStyle.addClass(binding, rowIndex, className, false);

I haven't properly tested this workaround, neither, am I sure that it will solve your problem, but I'm hoping, that it can help you to unlock it.

If you find a good solution, feel free to make a PR to the github repo!

cheers,
GR


Hi @Ruben Goncalves,

The workaround solved my problem. Thank you!

Hello @André Dinis 

First of all, thank you for reaching out.
We'll analyze your use case in order to understand what's happening, but at a first sight seems like an event concurrency issue.

Even though, I think the component has a simpler solution for that. In each column you have the possibility to add a list of conditional format rules, this allows you to add a cell class or a row class every time the rule is true.

Let me know if this solves your use case,

Cheers,
GM

Hello @Gonçalo Martins

Thanks for your quick reply.

Any clue why it started to be an issue with the new version?

Well, in this case, not really. I use the conditional format rules in some cases, but it doesn't solve this use case because you can only check a rule based on the value of the cell itself, and not based on the value or in comparison with the value of another cell, which is what I'm doing here.

Cheers,

André Dinis

My colleague will provide you with an explanation and a workaround very shortly!

Cheers,
GM


mvp_badge
MVP
Solution

Hi @André Dinis,

The problem, as you have notice is an infinite cycle, or close to it.

The reason for that is that the API that you're using, GridAPI.Styling.SetCellCssClass(...) requires the grid to be invalidate (as you can see in line 46), so that the changes become visible. Worth notice, that the this API was not designed with your scenario in mind (as in, using it with the event updatingView).

----

A possible workaround, is for you not to use the API and instead the framework internal mechanism: GridManager.GetGridById(gridID).features.cellStyle.addClass(binding, rowIndex, className, false);

I haven't properly tested this workaround, neither, am I sure that it will solve your problem, but I'm hoping, that it can help you to unlock it.

If you find a good solution, feel free to make a PR to the github repo!

cheers,
GR


Hi @Ruben Goncalves,

The workaround solved my problem. Thank you!

Hello @André Dinis 

Any feedback on the solution provided? If it's solved please mark this as solved in order to help the other community members that might have the same difficulties in the future.

Cheers,
GM


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