We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET MVC
  4. Different background color for multiple column grouping

Different background color for multiple column grouping

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.

3 Replies
SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team April 11, 2017 11:54 AM UTC

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"); 
            }); 
        }) 
) 
 
 
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. 


CR CLAUDIO RICCARDI April 11, 2017 02:04 PM UTC

Great!

It works perfectly!

Thanks a lot.

Claudio

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team April 12, 2017 06:11 AM UTC

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. 


Loader.
Up arrow icon