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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Different background color for multiple column grouping

Thread ID:

Created:

Updated:

Platform:

Replies:

129926 Apr 10,2017 04:06 PM UTC Apr 12,2017 06:11 AM UTC ASP.NET MVC 3
loading
Tags: Grid
CLAUDIO RICCARDI
Asked On April 10, 2017 04:06 PM UTC

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 [Syncfusion]
Replied On 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. 


CLAUDIO RICCARDI
Replied On April 11, 2017 02:04 PM UTC

Great!

It works perfectly!

Thanks a lot.

Claudio

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;