Footer Height customization

[Praveen D]

I have used  Footer aggregate in Blazor DataGrid Component | Syncfusion

and below to get count but the height of the footer is too big. tried div height but no lock. Please guide 

        <GridAggregates>

              <GridAggregate>

                  <GridAggregateColumns>

                  <GridAggregateColumn Field=@nameof(UserData.UserID) Type="AggregateType.Count" >

                      <FooterTemplate>

                              @{

                                  var aggregate = (context as AggregateTemplateContext);

                                  <div>

                                      <p>#: @aggregate.Count</p>

                                  </div>

                              }

                          </FooterTemplate>

                      </GridAggregateColumn>

                  </GridAggregateColumns>

              </GridAggregate>

      </GridAggregates>

[Prathap Senthil]

Hi Praveen D,


Based on the requirements, we suggest using the following approach to override the aggregate row style customization. Please refer to the code snippet and sample below for your reference

<SfGrid DataSource="@Orders" AllowPaging="true">

    <GridPageSettings PageSize="8"></GridPageSettings>

    <GridAggregates>

        <GridAggregate>

            <GridAggregateColumns>

                <GridAggregateColumn Field=@nameof(OrderData.Freight) Type="AggregateType.Count" >

                    <FooterTemplate>

                        @{

                            var aggregate = (context as AggregateTemplateContext);

                            <div>

                                <p style="margin-top: revert; margin-bottom: revert;">Count: @aggregate.Count</p>

                            </div>

                        }

                    </FooterTemplate>

                </GridAggregateColumn>

            </GridAggregateColumns>

        </GridAggregate>

   

    </GridAggregates>

    <GridColumns>

        <GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>

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

        <GridColumn Field=@nameof(OrderData.Freight) HeaderText="Freight" TextAlign="TextAlign.Right" Width="120"></GridColumn>

        <GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="150"></GridColumn>

    </GridColumns>

</SfGrid>

 

 

<style>

    .e-grid .e-summarycell {

        line-height: 1px;

        padding: 1px 1px;

    }

</style>

Sample: https://blazorplayground.syncfusion.com/embed/rtBfMWBNTTeNbmgy?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

Regards,
Prathap Senthil