Welcome Guest Search | Active Topics | Sign In | Register

conditional set backcolor of cell based on another cell's value on the same item... Options
grchen168
Posted: Tuesday, November 7, 2023 5:27:56 AM
Rank: Member
Groups: Member

Joined: 8/26/2021
Posts: 28
using eo.web grid, when rendering each items, how can I programmatically set a cell's backcolor based on the value of the other cell's value of the same item??

For example, while rendering, for each item, if cell(1)'s value is greater than 0, then set cell(2)'s backcolor to green, otherwise, set cell(2)'s backcolor to red. something like that...
eo_support
Posted: Tuesday, November 7, 2023 9:47:25 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,083
Hi,

You would need to use this event to detect cell value changes:

https://www.essentialobjects.com/doc/eo.web.gridcolumn.clientsideendedit.html

Note that this is a client side JavaScript callback on each GridColumn. So you will need to set it on all columns where you wish to detect cell value changes. Inside that event handler you can run your custom logic to determine which other cell's style need to change and then call this method with JavaScript to override the cell style:

https://www.essentialobjects.com/doc/jsdoc.public.web.gridcell.overridestyle.html

The argument for overrideStyle is a CSS style rule name.

Please let us know if you still have any questions.

Thanks!
grchen168
Posted: Wednesday, November 8, 2023 9:44:48 PM
Rank: Member
Groups: Member

Joined: 8/26/2021
Posts: 28
Thanks for reply.

You mentioned using clientsideendedit event to detect cell value changes and take action (in this case, change cell backcolor) accordingly,
But what if for ordinary grid data rendering (for example, just displaying resultset from backend datasource), not for editing data in the grid, it seems there is no clientsideendedit event available while in rendering data (not in editing mode).

Then, what else can we use to handle it while rendering grid data?

BTW, maybe you can consider provide a server side event while rendering each item's data, then we can take action in server side before displaying each items' cell content (including value and style).



eo_support
Posted: Thursday, November 9, 2023 1:05:49 PM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,083
Hi,

When no edting is involved, you would just use this property on the server side to set the cell style after you populated the Grid data:

https://www.essentialobjects.com/doc/eo.web.gridcell.style.html

You can also use this property to automatically populate the cell style through data binding process:

https://www.essentialobjects.com/doc/eo.web.gridcolumn.stylefield.html

Please let us know if this works for you.

Thanks!
grchen168
Posted: Thursday, November 9, 2023 9:38:40 PM
Rank: Member
Groups: Member

Joined: 8/26/2021
Posts: 28
Thank you for the reply.
For using either Style & StyleField methods, It is definitely working.

But those 2 ways have their cons, respectively.

Using Style, it means, after binding the grid with datasource, I also need to additionally iterate over each item to apply needed style to specified cells of each item.

Using StyleField, I need to manage to modify current data retrieval sql statements to accompanying additional (style) fields (those are not actually exist in backend data scheme) in order to applying styling. (And In my case, I have multiple data columns need to apply different styles individually in each data row)

Anyway, in current eo.web grid, those are only 2 available ways to conditionally apply cell's style, and hope in the future build, there is one server side event (for example: Grid_FormattingItem) that will be triggered while each item is rendered (either in editing mode or non-editing mode), then in the event handler, I can manipulate each cell's style and/or value's dataformat (ex: datetime string format or convert alphabet character's upper/lower case,..etc ).

:)




eo_support
Posted: Friday, November 10, 2023 9:54:13 AM
Rank: Administration
Groups: Administration

Joined: 5/27/2007
Posts: 24,083
But they are really the same --- it's the same routine that is to be called for each cell inside a loop. The only difference is if the loop is in your code or the loop is in our code. We believe having the loop in your code gives you more flexibility. For example, if you only need to conditional formating for one column, or for a few cells, then you would not need to loop through every cells. In that case if we do the loop and call your event handler on every cell, then we would be unnecessary checking more cells than needed. So we think it's better to leave this part completely to you.
grchen168
Posted: Friday, November 10, 2023 11:16:09 AM
Rank: Member
Groups: Member

Joined: 8/26/2021
Posts: 28
It seems not the same because there is pagination feature also need to be considered.
For example, if there is 100000 items to be rendered in the grid (said, with 100 items per page), and if the Grid_FormattingItem event is available, then I think eo.grid will only just trigger 100 times of that event handler for current visible page on demand.
But if no such event or similar mechanism available, then my code need to iterate over 100000 items in advance to make the needed styles in place before handing it over to eo.grid to display.
grchen168
Posted: Friday, November 10, 2023 11:21:42 AM
Rank: Member
Groups: Member

Joined: 8/26/2021
Posts: 28
BTW, the Grid_FormattingItem(Item item) event should be item-based, not cell-based.
So, when triggered, my code only need to customized the cells' formatting of that passed item argument.


You cannot post new topics in this forum.
You cannot reply to topics in this forum.
You cannot delete your posts in this forum.
You cannot edit your posts in this forum.
You cannot create polls in this forum.
You cannot vote in polls in this forum.