Grid Properties Not Updating

[FerrisChamp]

Hello,

I am trying to keep track of the conditional formatting that a user applies. For the filtering and grouping, I was able to use an event to update a variable keeping track of the changes. However, the conditional formatting doesn’t have an event I see, and the grid properties don’t update (grid.ConditionalFormatting, grid.Grouping.GroupBy, grid.Filtering.Filter). Is there a way to force the properties into a two-way binding or create an event for OnConditionalFormatting?

Thank you,

Ferris

[svetoslav_borislavov]

Hi,

Grid’s conditional formatting property is dynamic,
please see the following example:
https://codepen.io/dkeamcaksoem/pen/JjwZdrQ

You may add and remove formating and get the current with the button

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[FerrisChamp]

Hi,

So I am starting off with no conditional formatting then trying to capture any conditional formatting on a button click.

var temp = grid.ConditionalFormatting;

However the grid.ConditionalFormatting property is empty (count = 0) even when I have conditional formatting applied. I am using the C# on the razor page and not JS, not sure if that makes a difference.

Thanks you,

Ferris

[FerrisChamp]

Hi,

Update by calling a JS function, I was able to see the updates with the conditional formatting property.

window.GetConditionalFormatting = () => {
const grid = document.getElementById(“io-page-grid”);
const format = grid.conditionalFormatting
console.log(format);
return format;

}

This is what I get:

column: “all”

condition: “equal”

firstValue: “0”

fontFamily: “Roboto, \\\”Helvetica Neue\\\”, sans-serif”

fontSize: “14px”
highlight: “#9FC5E8”

secondValue: 1

text: “#5A5A5A”

 

However, when trying to return the data to my C# code:

List<GridConditionalFormatting> formatting = await JS.InvokeAsync<List<GridConditionalFormatting>>(“GetConditionalFormatting”);

I get something different instead:

column: “all”

condition: “LessThan”

firstValue: “0”

fontFamily: “”

fontSize: “The default fontSize as set in CSS”
highlight: “The default backgroundColor as set in CSS”

secondValue: 1

text: “The default color as set in CSS”

The values of some of the properties seem to be different. Could you help me correct this issue?

Thank you,

Ferris

• This reply was modified 7 months, 1 week ago by FerrisChamp.
• This reply was modified 7 months, 1 week ago by FerrisChamp. Reason: formatting issues
• This reply was modified 7 months, 1 week ago by FerrisChamp.
• This reply was modified 7 months, 1 week ago by FerrisChamp.

[svetoslav_borislavov]

Hi,

You may try creating a custom class for the list returned from JS.
Using the class for this purpose may not work as expected

Best Regards,
Svetoslav Borislavov

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts