Header cell colors

[Sheldon Parkes]

I have a nested grid and would like to change the colors of certain header cells based on the values in other header cells. I tried using the HeaderCellInfo event but it doesn't fire for some reason. How would a go about doing this?

The same concept works fine for QueryCellInfo event for non-header cells.

Thanks

[Monisha Saravanan]

Hi Sheldon Parkes, 

  

Greetings from Syncfusion support. 

  

We have analyzed your query and we suspect that you need to change the background of the header cell. Kindly try the below CSS to change color of the header cell. Kindly refer the attached code snippet and sample for your reference. 

  

@page "/" 

@using Syncfusion.Blazor.Grids 

  

<SfGrid DataSource="@Orders" Height="315"> 

    <GridColumns> 

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr1" }})" TextAlign="TextAlign.Right" Width="140"></GridColumn> 

        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer ID" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Order.ShipCity) HeaderText="Ship City" CustomAttributes="@(new Dictionary<string, object>(){ { "class", "e-attr2" }})" Width="100"></GridColumn> 

        <GridColumn Field=@nameof(Order.OrderDate) HeaderText="Order Date" Format="d" Type="ColumnType.Date" Width="100"></GridColumn> 

    </GridColumns> 

</SfGrid> 

  

  

<style> 

  

    .e-headercell.e-attr1 { 

        background: #d7f0f4; 

    } 

     .e-headercell.e-attr2 { 

        background: red; 

    } 

</style> 

  

Sample:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1627990375.zip 

Reference: https://blazor.syncfusion.com/documentation/datagrid/cell#custom-attributes  

 

Kindly get back to us if we have misunderstood your query or if you have further queries. 

  

Regards, 

Monisha. 

[Sheldon Parkes]

Not exactly :) I have GridAggregateColumns with GroupCaptionTemplates and I want to change the background color based on the values in other GridAggregateColumns in the grid. GridAggregateColumn doesn't seem to have a CustomAttributes.

 <GridAggregateColumn Field="@nameof(Overall2.HoursAdherence)" Type="AggregateType.Average" >

                        <GroupCaptionTemplate Context="subContext">

                            @{

                                var aggregate = CalculateAggregateHours(subContext as AggregateTemplateContext);

                                <span>@aggregate%</span>

                            }

                        </GroupCaptionTemplate>

                    </GridAggregateColumn>

                    <GridAggregateColumn Field="@nameof(Overall2.ShiftAdherence)" Type="AggregateType.Average" >

                        <GroupCaptionTemplate Context="subContext">

                            @{

                                var aggregate = CalculateAggregateShift(subContext as AggregateTemplateContext);

                                <span>@aggregate%</span>

                            }

                        </GroupCaptionTemplate>

[Monisha Saravanan]

Hi Sheldon Parkes, 

Thanks for the update. 

We suspect that you need to apply CSS for the caption template based on the values. You can use the below solution to achieve your requirement. Here we have applied different background color based on the condition. Kindly check the attached code snippet and sample for your reference.  

 

<SfGrid DataSource="@Products" AllowGrouping="true" AllowPaging="true"> 

    <GridGroupSettings Columns=@Units></GridGroupSettings> 

    <GridAggregates> 

        <GridAggregate> 

            <GridAggregateColumns> 

                 

                 

                <GridAggregateColumn Field=@nameof(Product.UnitsInStock) Type="AggregateType.Max"> 

                    <GroupCaptionTemplate> 

                        @{ 

                            var aggregate = ((context as AggregateTemplateContext).Max); 

                            int aggregate1 = Convert.ToInt32(aggregate); 

 

                            if (aggregate1 >= 10) 

                            { 

                               

                                <div class="e-summarycell" style="background-color:green"> 

                                Maximum: @aggregate 

                                </div> 

                            } 

                            else 

                            { 

                                <div class="e-summarycell" style="background-color:red"> 

                                Maximum: @aggregate 

                                </div> 

                            } 

                        } 

                    </GroupCaptionTemplate> 

                </GridAggregateColumn> 

            </GridAggregateColumns> 

        </GridAggregate> 

    </GridAggregates> 

    <GridColumns> 

        <GridColumn Field=@nameof(Product.ProductName) HeaderText="Product Name" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

        <GridColumn Field=@nameof(Product.QuantityPerUnit) HeaderText="Quantity Per Unit" Width="150"></GridColumn> 

        <GridColumn Field=@nameof(Product.UnitsInStock) HeaderText="Units In Stock" TextAlign="TextAlign.Right" Width="130"></GridColumn> 

        <GridColumn Field=@nameof(Product.Discontinued) HeaderText="Discontinued" TextAlign="TextAlign.Right" DisplayAsCheckBox="true" Type="ColumnType.Boolean"></GridColumn> 

    </GridColumns> 

</SfGrid> 

 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-806675973.zip 

Reference: https://blazor.syncfusion.com/documentation/datagrid/how-to/grid-styling 

If we misunderstood your requirement or the reported issue is not resolved. kindly share below details to validate the issue further from our side. 

• Share the Grid code snippet.
• Share us more information regarding your query. Also explain whether you need to apply background color to the header cell or group caption template cell based on condition from same column or from different column/caption template.
• Share the video demonstration of the issue along with replication procedure.
• If possible share us simple issue reproducing sample or try to reproduce the reported issue on the above sample

The above provided details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible also Kindy get back to us if you need further assistance 

Regards, 

Monisha