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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to apply different Background color to the groupcaption?

We can update the different colors for each group caption using the captionFormat of the Grid groupSettings and helper functions of the jsRender.

 

HTML

 

Render the Grid with the groupedColumns and captionFormat.

 

 

CSHTML

 

 

 

 

 

 

ASPX

 

<ej:Grid ID="Grid" runat="server" AllowPaging="True" AllowGrouping="true">

    <PageSettings PageSize="8" />

    <GroupSettings CaptionFormat="#caption" GroupedColumns="CustomerID" />

    <Columns>

        <ej:Column Field="OrderID" HeaderText="Order ID"></ej:Column>

        <ej:Column Field="CustomerID" HeaderText="Customer ID"></ej:Column>

        <ej:Column Field="EmployeeID" HeaderText="Employee ID"></ej:Column>

        <ej:Column Field="Frieght" HeaderText="Freight" Format="{0:C}"></ej:Column>

    </Columns>

</ej:Grid>

 

 

 

Define captionFormat template and styles that needed for the Grid.

 

 

Define the helper functions that need to generate the color and update them to the styles of the caption format template.

 

 

Figure: Grid with customized background color in caption format.

Article ID: Published Date: Last Revised Date: Platform: Control:
7748 06/05/2017 06/05/2017 JavaScript ejGrid
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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