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: November 16, 2018).
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.




Render the Grid with the groupedColumns and captionFormat.












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

    <PageSettings PageSize="8" />

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


        <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>






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

Please sign in to access our KB

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

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