FooterTeplate Color

[Fernando]

Hello, how do I set the background color of the footertemplate cell according to this example?

I wish this way filling the entire cell:

but it's like this:

Thanks

<style>
    /* Em custom-styles.css */
    .custom-footer {
        background-color: green; /* Defina a cor desejada */
        color: white;
        font-weight:bold;
    }
</style>

@{
        var col = new List<Syncfusion.EJ2.Grids.GridAggregateColumn> {
    new Syncfusion.EJ2.Grids.GridAggregateColumn(){ Field = "ValorFinal", Format = "N2", Type = "sum", FooterTemplate = "<div class='custom-footer'>${sum}</div>" },
    new Syncfusion.EJ2.Grids.GridAggregateColumn(){ Field = "ValorFaturado", Format = "N2", Type = "sum", FooterTemplate = "${sum}" },
    new Syncfusion.EJ2.Grids.GridAggregateColumn(){ Field = "ValorFaturar", Format = "N2", Type = "sum", FooterTemplate = "${sum}" },
    new Syncfusion.EJ2.Grids.GridAggregateColumn(){ Field = "ValorPago", Format = "N2", Type = "sum", FooterTemplate = "${sum}" }
    };
}

@{
    var ChildGrid = new Syncfusion.EJ2.Grids.Grid()
    {
        Width = "1000",
        Locale = "pt",
        QueryString = "PropostaId",
        Aggregates = new List<Syncfusion.EJ2.Grids.GridAggregate> {
             new Syncfusion.EJ2.Grids.GridAggregate() {Columns = col} },
        Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
           
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="DescricaoparcelaId", ForeignKeyField="Id", ForeignKeyValue="NomeDescricao", DataSource=ViewBag.descricao, HeaderText="Descrição", Width="150" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Format="N2", Type="number", Field="ValorFinal", HeaderText="Valor Vendido", Width="100" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Format="N2", Type="number", Field="ValorFaturado", HeaderText="Valor Faturado", Width="100" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Format="N2", Type="number", Field="ValorFaturar", HeaderText="Valor a Faturar", Width="100" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Format="N2", Type="number", Field="ValorPago", HeaderText="Valor Pago", Width="100" },
            new Syncfusion.EJ2.Grids.GridColumn(){ Field="NotaFiscal", HeaderText="Nº NF", Width="60" },
        }
    };
}

<ejs-grid id="GridRelatorioGerencial" childGrid="ChildGrid" detailDataBound="detailDataBound" locale="pt" allowfiltering="true" height="500" allowPaging="true" toolbar="@(new List<string>() { "Search" })">
    <e-data-manager url="@Url.Action("GridGerencial_Read","Relatorios")"
                    adaptor="UrlAdaptor" crossDomain="true"></e-data-manager>
    <e-grid-filterSettings type="Excel"></e-grid-filterSettings>
    <e-grid-columns>
        <e-grid-column field="Codigo" headerText="Proposta" type="string" width="100"></e-grid-column>       
    </e-grid-columns>
</ejs-grid>

<script>
    function detailDataBound(args) {
        var hostname = window.location.hostname;
        var nomeservidor = "";
        if (hostname !== "localhost") {
            nomeservidor = "/financeironew";
        }
        console.log(args.childGrid.parentDetails.parentKeyFieldValue);
        args.childGrid.dataSource = new ej.data.DataManager({
            url: nomeservidor + "/Relatorios/GridSubGerencial_Read/" + args.childGrid.parentDetails.parentKeyFieldValue,
            adaptor: new ej.data.UrlAdaptor()
        });
    }
</script>

[Fernando]

Hello,

Could you help me in this case?

Thanks

[Hemanthkumar S]

Hi Fernando,

Greetings from Syncfusion support.

Query: how do I set the background color of the footertemplate cell according to this example?

Based on the information you've provided, it appears you want to apply a background color to the aggregate footer template in the Syncfusion EJ2 Grid. The Grid offers support for customizing its appearance by allowing you to override its default CSS. This capability enables you to modify the styling and achieve the desired background color for the aggregate footer template.

For more information, please refer to the code example, documentation, screenshot, and sample.

[FooterTemplate Color\EJ2Grid\Views\Home\Index.cshtml]

 

<style>

    #Grid .e-summarycell.e-templatecell {

        background-color: green;

        color: white;

        font-weight:bold;

    }

</style>

 

<ejs-grid id="Grid" dataSource="ViewBag.datasource" childGrid="ChildGrid">

Style and Appearance: https://ej2.syncfusion.com/aspnetcore/documentation/grid/style-and-appearance/style-and-appearance

Please feel free to contact us if you require any further assistance. We are always available and eager to help you in any way we can.

Regards,

Hemanth Kumar S

Attachment: FooterTemplate_Color_101b5edb.zip

[Fernando]

Hello

This worked perfectly. 

Thank you very much!

[Hemanthkumar S]

Hi Fernando,

Thank you for your message. We are pleased to hear that you found our suggested approach helpful. We will mark this forum as solved. Please don't hesitate to reach out to us if you need any further assistance.

Regards,

Hemanth Kumar S