Search code examples
c#gridviewdotvvm

DotVVM - What are the possibilities for coloring rows in GridView?

I'm trying to color rows in the GridView based on the state (Enum value) of underlying item in the row, but none of the solutions I've found in docs seems appropriate for me.

I have DataSource like this for the GridView

public GridViewDataSet<DTO> Items { get; set; }

DTO objects come from microservice, so it does not seem reasonable to me to add a property of type BootstrapColor into DTO object, which is based in the "deep backend" microservice. This approach is inspired by the Sample 2 here: https://www.dotvvm.com/docs/controls/bootstrap/GridView/2.0

Perhaps, It's possible to use <dot:Decorator> somehow like in the Sample 5 here: https://www.dotvvm.com/docs/controls/builtin/GridView/latest

But I haven't found any proper example of using <dot:Decorator> or <bs:ColorDecorator> for coloring rows based on some conditions in docs. I can only colour all the rows with the same color.

I've tried to apply some conditions in markup eg.

<RowDecorators>
    <bs:ColorDecorator Color="{value: EnumState == StateValue ? Color1 : Color2 }"></bs:ColorDecorator>
</RowDecorators>

but it didn't work

Is there any other way to color rows of the GridView than described above?

Solution

  • The BootstrapColor enum should be treated as a presentation layer thing. You are right that it's not wise to use it in internal microservices or in lower layers of the application.

    The DTO that comes from the lower layer should contain the information about what's going on, without caring about how it will be displayed to the user. I would expect an enum with values like Paid, Unpaid, Canceled etc., or alternatively set of bool flags - IsPaid, IsCanceled and so on.

    In the presentation layer, you have two options:

    1. Project the DTO to another DTO (either manually, or using AutoMapper for example) which will contain the BootstrapColor enum value.

    2. Use expressions in DotVVM data-bindings to make the transform in the markup.

    For simple cases, I would choose the second option.

    The correct syntax for <bs:ColorDecorator> is this:

    <RowDecorators>
    <bs:ColorDecorator Color="{value: State == OrderState.Confirmed ? BootstrapColor.Success : BootstrapColor.Danger }" />
</RowDecorators>

    You need to add appropriate @import directives so the enums will resolve correctly.

    If there are more than two options, or some states can co-exist together, you may consider using CSS classes:

    <RowDecorators>
    <dot:Decorator class-active="{value: IsActive}" class-paid="{value: IsPaid}" />
</RowDecorators>

    This will add the active and paid CSS classes on the rows based on the value of IsActive and IsPaid properties (they must be bool).