Skip to Content (Press Enter)
UserImage.jpg
Tsubasa Yoshikawa
544Views
8Comments
Solved
[OutSystems Data Grid] Change background color of cell according to selected menu on the right-click menu
Question
Reactive
Forge
outsystems-data-grid
Reactive icon
OutSystems Data Grid (O11)
Forge asset by OutSystems
Application Type
Reactive

What I want is below.

On the right-click menu like below image, 

when you click RedColor, background color of  the cell changes red.

When you click YellowColor, background color of the cell changes yellow .

When you click ResetColor, background color of the cell gets back to default color "white".



I came to implemet like this here but I'm not really confident..


I'm not sure how to make Click Action and how to change cell background color when I select on right-menu.

I'd appreciate it if you could tell me how to implement this.

Do you have any good ideas?


I'd be nice if you could give me a sample oml and how to do it .

Best,

0
0
14 Nov 2022
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hi @Tsubasa Yoshikawa 

I found out that you were having several issues:

  • GetSelectedRowsData returns the selected row information, not the cell information (when you click on the row header) so it would never be what you need.

  • The binding on the Price2 column was incorrect and duplicated with the Price3.

  • Your back_red and back_yellow need an !important in the background-color (or a stronger selector) since the Grid already has a class applying background color so you need to make it stronger than the one from the Grid:
  • The class back_reset is useless since you already have a client action to remove classes from the cell - RemoveAllCssClassesFromCell.

  • In order to get the data you need to use both AddCellCssClass and RemoveAllCssClassesFromCell you can do something like the following:

It worked fine so this should be enough to help you (won't be able to share oml).
For multiple selections you just need to return the list instead of the first cel information since for demo purposes I simplified the code).

Cheers,
GM

See solution in context
ColorsClass.gif
0
0
21 Nov 2022
Copy Link
UserImage.jpg
Tsubasa Yoshikawa

Hi GM,

I appreciate it. I got what I wanted.

Thank you.


0
0
22 Nov 2022
Copy Link
UserImage.jpg
Tsubasa Yoshikawa

Replying to Tsubasa Yoshikawa's comment on 22 Nov 2022 15:55:16


Also, I'm curious about something but I wonder if we can save cell data we changed color in database as an entity.

For example, let's say you have a save button on top of the screen.


You change background color of some cells and click the save button then you reload the screen.


Change cell color adn click save button



↓ reload


Display colored cells you saved

(You can see the grid with colored cells you changed. )


I'm now thinking about it but do you have any ideas on this?


Best,


0
0
22 Nov 2022
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff

Hi @Tsubasa Yoshikawa 

Just to make this more collaborative, can you please share:

  • what do you want to achieve? (for instance, I don't see an easy way to make it persistent)
  • what have you tried so far using the Wijmo (on Wijmo's website included) and Data Grid APIs?
    • you can also share the sample with your implementation to make it easier to understand your attempts 

Cheers,
GM

0
0
14 Nov 2022
Copy Link
UserImage.jpg
Tsubasa Yoshikawa

Hi,

What I achieve is to change backgroud color of the cell according to pressing menu on the right-click menu.

RedColor→ change the cell background color to red

YellowColor→ change the cell background color to yellow

ResetColor→ change the cell background color back to original (white)


What I implemeted is

・show right-click menu


What I haven't done yet is

・ when I select menu on right-click menu , how do I trigger Client action.

・How to change cell color on Javascript in ClientAction 


This is where I am.


I'm attaching my OML.

I implementing on this screen (CellColorByClickGrid)


Could you possibly give me any good advice?

Best,

DynamicGrid.oml
0
0
15 Nov 2022
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff

Replying to Tsubasa Yoshikawa's comment on 15 Nov 2022 02:00:28

Hi @Tsubasa Yoshikawa 

You can try to follow this approach using the format Cells available on this Wijmo's sample.

Cheers,
GM

0
0
18 Nov 2022
Copy Link
UserImage.jpg
Tsubasa Yoshikawa

Replying to Gonçalo Martins' comment on 18 Nov 2022 10:51:33

Hi GM,

Thanks.

I took a look at your link and  other similar posts and tried them but it doesn't work.. 

I'm not sure how to change cell  background color when selecting action on right-click menu...

Could you possibly tell me where I'm missing?  I was wondering if I could get your advice.


The below is what I did. 

I created Client action to change cell color here in CustomOption.


I made this kind of Javascript here.



I made the rest (YellowColor , ResetColor) Cilck action the same way.


I also set CSS.




Best,

Tsubasa

0
0
19 Nov 2022
Copy Link
UserImage.jpg
Tsubasa Yoshikawa

I updated my oml.

I'm using AddCssCellClass action.



But I'm not sure how to get current selected column and It still doesn't work... 


I'd like you to tell me how I should do it.


ColorCellGrid.oml
0
0
21 Nov 2022
Copy Link
2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hi @Tsubasa Yoshikawa 

I found out that you were having several issues:

  • GetSelectedRowsData returns the selected row information, not the cell information (when you click on the row header) so it would never be what you need.

  • The binding on the Price2 column was incorrect and duplicated with the Price3.

  • Your back_red and back_yellow need an !important in the background-color (or a stronger selector) since the Grid already has a class applying background color so you need to make it stronger than the one from the Grid:
  • The class back_reset is useless since you already have a client action to remove classes from the cell - RemoveAllCssClassesFromCell.

  • In order to get the data you need to use both AddCellCssClass and RemoveAllCssClassesFromCell you can do something like the following:

It worked fine so this should be enough to help you (won't be able to share oml).
For multiple selections you just need to return the list instead of the first cel information since for demo purposes I simplified the code).

Cheers,
GM

ColorsClass.gif
0
0
21 Nov 2022
Copy Link
UserImage.jpg
Tsubasa Yoshikawa

Hi GM,

I appreciate it. I got what I wanted.

Thank you.


0
0
22 Nov 2022
Copy Link
UserImage.jpg
Tsubasa Yoshikawa

Replying to Tsubasa Yoshikawa's comment on 22 Nov 2022 15:55:16


Also, I'm curious about something but I wonder if we can save cell data we changed color in database as an entity.

For example, let's say you have a save button on top of the screen.


You change background color of some cells and click the save button then you reload the screen.


Change cell color adn click save button



↓ reload


Display colored cells you saved

(You can see the grid with colored cells you changed. )


I'm now thinking about it but do you have any ideas on this?


Best,


0
0
22 Nov 2022
Copy Link
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.