How to set background color for 7 alternative rows

[Aleqsandre]

Hello ,

Is it possible to set background color for 7 alternative rows? I mean first 7 rows same background color and after that another 7 rows different background color and so on?

[Jeevakanth Palaniappan]

Hi Aleqsandre, 

Greetings from Syncfusion support. 

We have validated your query and you can achieve your requirement by using the RowdataBound event. Please refer the below documentation and sample for your reference. 

Documentation - https://blazor.syncfusion.com/documentation/datagrid/row#customize-rows 

Sample - https://www.syncfusion.com/downloads/support/directtrac/general/ze/Grouping1542094808 

@using Syncfusion.Blazor.Grids 

 

<SfGrid DataSource="@Orders" EnableHover=false AllowSelection=false Height="280"> 

    <GridEvents TValue="Order" RowDataBound="RowBound"></GridEvents> 

    <GridColumns> 

        .. 

    </GridColumns> 

</SfGrid> 

 

<style> 

    .below-7 { 

        background-color: orangered; 

    } 

 

    .above-7 { 

        background-color: yellow; 

    } 

 

</style> 

 

@code { 

    int Count { get; set; } = 1; 

 

    public void RowBound(RowDataBoundEventArgs<Order> args) 

    { 

        if (Count > 14) { 

            Count = 1; 

        } 

        if (Count <= 7) { 

            args.Row.AddClass(new string[] { "below-7" }); 

        } 

        else 

        { 

            args.Row.AddClass(new string[] { "above-7" }); 

        } 

        Count++; 

    } 

Get back to us if you have any other queries. 

Regards, 

Jeevakanth SP.