Different background color for multiple column grouping

[CLAUDIO RICCARDI]

Hi, 

I have the following grid:

@(Html.EJ().Grid<SlimHub.Models.Contract>("ContractsGrid").Datasource(ds => ds.Json((IEnumerable<Contract>) Model.Contracts.ToList()).UpdateURL("NormalUpdate").InsertURL("NormalInsert").RemoveURL("NormalDelete").Adaptor(AdaptorType.RemoteSaveAdaptor))

.EditSettings(edit => { edit.AllowAdding().AllowDeleting().AllowEditing(); })

.ToolbarSettings(toolbar =>

{

     toolbar.ShowToolbar().ToolbarItems(items =>

     {

          items.AddTool(ToolBarItems.Add);

          items.AddTool(ToolBarItems.Edit);

          items.AddTool(ToolBarItems.Delete);

          items.AddTool(ToolBarItems.Update);

          items.AddTool(ToolBarItems.Cancel);

     });

})

.AllowMultiSorting()

.AllowFiltering()

.AllowPaging()

.AllowGrouping()

.EnableHeaderHover()

.AllowResizing()

.AllowTextWrap(true)

.FilterSettings(filter => { filter.FilterType(FilterType.Excel); })

.GroupSettings(group => { group.GroupedColumns(col => { col.Add("SiteId"); col.Add("ServiceTypeId"); }); })

.PageSettings(page => { page.PageSize(20); })

.Locale("it-IT")

.SummaryRow(row =>

{

     row.Title("Totale").SummaryColumns(col => { col.SummaryType(SummaryType.Sum).Format({0:C}").DisplayColumn("TotalAmount").DataMember("TotalAmount").Add(); }).Add();

     row.Title("Totale Attivi").SummaryColumns(col => { col.SummaryType(SummaryType.Custom).Format("{0:C}").DisplayColumn("TotalAmount").CustomSummaryValue("sumActiveContracts").Add(); }).Add();

})

.Columns(col =>

{

     col.Field("ContractId").HeaderText("ID Offerta").TextAlign(TextAlign.Center).Width(0).Visible(false).Add();

     col.Field("ContractCode").HeaderText("Codice").TextAlign(TextAlign.Center).Width(50).Add();

     col.Field("RenewalNum").HeaderText("Rinn.").TextAlign(TextAlign.Center).Width(10).Add();

     col.Field("SiteId").HeaderText("Sede Lavori").ForeignKeyField("SiteId").ForeignKeyValue("SiteDesc").DataSource((IEnumerable<object>)ViewBag.Sites).HeaderTextAlign(TextAlign.Center).Width(150).Add();                                            col.Field("ServiceTypeId").HeaderText("Servizio").ForeignKeyField("ServiceTypeId").ForeignKeyValue("ServiceTypeDesc").DataSource((IEnumerable<object>)ViewBag.ServiceTypes).HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Width(40).Add();

                                      col.Field("ServiceId").HeaderText("Contro").ForeignKeyField("ServiceId").ForeignKeyValue("ServiceDesc").DataSource((IEnumerable<object>)ViewBag.Services).HeaderTextAlign(TextAlign.Center).TextAlign(TextAlign.Center).Width(40).Add();

                                        col.Field("EndDate").HeaderText("Scadenza").TextAlign(TextAlign.Center).Format("{0:dd/MM/yyyy}").Width(30).Add();

                                        col.Field("TotalAmount").HeaderText("Costo Totale").TextAlign(TextAlign.Right).Format("{0:c2}").Width(30).Add();

                                        col.Field("QuoteSimulationId").HeaderText("Commessa").HeaderTextAlign(TextAlign.Center).Template("<img style='width: 16px; height: 16px' src='../../images/Flags/imgBudget_{{:QuoteSimId ? 'true' : 'false'}}.png' alt='imgBudget_{{:QuoteSimId ? 'true' : 'false'}}.png' />").TextAlign(TextAlign.Center).Width(10).Add();

                                    })

                                                .ChildGrid(d =>

                                                {

                                                    d.Datasource(ds => ds.Json((IEnumerable<Work>

                                                        ) ViewBag.Works))

                                                        .QueryString("ContractId")

                                                        .Columns(col =>

                                                        {                                                             col.Field("ContractId").HeaderText("ContractId").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Visible(false).Add();

     col.Field("WorkCode").HeaderText("Codice").Width(100).Add();

   col.Field("WorkYear").HeaderText("Anno").TextAlign(TextAlign.Center).Width(10).Add();

   col.Field("WorkMonth").HeaderText("Mese").TextAlign(TextAlign.Center).Width(10).Add();

                                                            col.Field("WorkPlanningDate").HeaderText("Data Pianif.").TextAlign(TextAlign.Center).Format("{0:dd/MM/yyyy}").Width(20).Add();

                                                            col.Field("WorkRegisterDate").HeaderText("Data Registr.").TextAlign(TextAlign.Center).Format("{0:dd/MM/yyyy}").Width(20).Add();

                                                        });

                                                })

                                                    .ClientSideEvents(eve => {

                                                        eve.ActionComplete("complete").ActionBegin("begin").EndEdit("endEdit").EndAdd("endAdd");

                                                        eve.QueryCellInfo("formattingCell");

                                                        eve.RecordClick("onContractRecordClick");

                                                    })

                                  )

How can I set a different background color to aech of the group caption row?

If I change css style

    .e-grid .e-groupcaption {

        background-color: #33cc00;

    }

every row changes its color. I need something different. Every grouping row with a different color

Thanks.

[Seeni Sakthi Kumar Seeni Raj]

Hi CLAUDIO,  

 

We achieved your requirement to update the different colors for each group caption using the CaptionFormat of the Grid GroupSettings and helper functions of the jsRender. Refer to the following code example and API References. 

 

<style> 

 

    .e-grid .e-groupcaption { 

        /*  give the padding for 

            element to fill  

            color entirely 

        */  

        padding: 0px; 

    } 

</style> 

<script type="text/x-jsrender" id="caption"> 

    <div style="{{:~replaceText()}}">@*update the colur in the element style*@ 

        {{:field}} - {{:key}}: {{:count}} {{if count == 1 }} count {{else}} counts {{/if}} 

    </div> 

 

</script> 

 

<div id="Grid"></div> 

<script type="text/javascript"> 

    function randColor2() { 

        var r = ('0' + (Math.random() * 256 | 0).toString(16)).slice(-2), 

        g = ('0' + (Math.random() * 256 | 0).toString(16)).slice(-2), 

        b = ('0' + (Math.random() * 256 | 0).toString(16)).slice(-2); 

        return '#' + r + g + b; 

    } 

    $(function () { 

        var helpers = { 

            replaceText: function (field) { 

                return "background-color:" + randColor2(); 

            } 

        }; 

        $.views.helpers(helpers); 

    }); 

</script> 

 

@(Html.EJ().Grid<object>("Grid") 

        .AllowGrouping() 

        .GroupSettings(grp=>{ 

            grp.CaptionFormat("#caption"); 

            grp.GroupedColumns(group => 

            { 

                group.Add("ShipCity"); 

                group.Add("CustomerID"); 

            }); 

        }) 

) 

 

https://help.syncfusion.com/api/js/ejgrid#members:groupsettings-captionformat 

 

Usually, the CaptionFormat helpful to update the customized templates in the group caption. In this, we have added the helper functions to modify the color for each group caption rows. The helper functions will be generated for each caption rendering.  

 

Regards, 

Seeni Sakthi Kumar S. 

[CLAUDIO RICCARDI]

Great!

It works perfectly!

Thanks a lot.

Claudio

[Seeni Sakthi Kumar Seeni Raj]

Hi Claudio,  

 

We are happy to hear that your requirement has been achieved. Please get back to us, if you require further assistance on this. 

 

Regards,  

Seeni Sakthi Kumar S.