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

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

Try Essential JS 2
Syncfusion Feedback

How to apply different Background color to the groupcaption?

Platform: jQuery |
Control: ejGrid

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.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

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

Live Chat Icon For mobile