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

How to customize the button in the grouped grid?

Hello, I have a grid with grouped columns and I want to change the icon to display the information in the grouped column. This is my grid and the code that generates it:

    var GroupedCols = new List<string>() { "IdProductTransactionHeader" };

<ej-grid id="GridResultAllPayments" locale="@(System.Globalization.CultureInfo.CurrentCulture.Name)" allow-selection="false" allow-sorting="true" allow-grouping="true" action-complete="Complete"
         allow-filtering="true" allow-multiple-exporting="true" toolbar-click="toolbarClick1" databound="dataBound">
    <e-toolbar-settings show-toolbar="true" toolbar-items=@(new List<string>() {"excelExport" })></e-toolbar-settings>
    <e-group-settings caption-format="#captionTemplate" show-drop-area="false" show-grouped-column="false" grouped-columns="GroupedCols"></e-group-settings>
    <e-filter-settings filter-type="Excel" />
    <e-datamanager adaptor="UrlAdaptor" url="/Products/GetAllPaymentsPerProduct?idProduct=@(ViewBag.IdProduct)&idProductType=@ViewBag.IdProductType"></e-datamanager>
        <e-column field="IdProductTransactionHeader" header-text="ProductTransactionHeader"></e-column>
        <e-column field="ValueDate" header-text="@Localizer["Value date"].Value" text-align="Left" format="{0:d}" enable-group-by-format="true"
                  tooltip="@Localizer["Value date"].Value (@Bancavalor.Resources.MyResources.LocalFormatDate)"></e-column>
        <e-column field="TransactDate" header-text="@Localizer["Transact date"].Value" text-align="Left" format="{0:d}"
                  tooltip="@Localizer["Transact date"].Value (@Bancavalor.Resources.MyResources.LocalFormatDate)"></e-column>
        <e-column field="TransactAmount" header-text="@Localizer["Transaction amount"].Value" text-align="Right" format="{0:N2}"></e-column>
        <e-column field="ClientName" header-text="@Localizer["Client"].Value"></e-column>
        <e-column field="IdTransactType" header-text="@Localizer["Transact type"].Value" text-align="Left" template-id="#transTemplate" format="{0:N2}"></e-column>
        <e-column field="CreationDate" header-text="@Localizer["Creation date"].Value" text-align="Left" format="{0:@Bancavalor.Resources.MyResources.GridFormatDate}"
                  tooltip="@Localizer["Creation date"].Value (@Bancavalor.Resources.MyResources.LocalFormatDate)"></e-column>
        <e-summary-row title="Total" show-caption-summary="true" show-total-summary="true">
                <e-summary-column summary-type="Sum" format="{0:N2}" display-column="TransactAmount" datamember="TransactAmount" />

<script id="captionTemplate" type="text/x-jsrender">
    <div class="row col-md-12">
        <div class="col-md-6">
        <div class="col-md-6">

I want to change the icon for buttons or something similar.


3 Replies

GL Gowri Loganathan Syncfusion Team February 7, 2020 10:37 AM UTC

Hi Neider, 
Thanks for using Syncfusion Products. 
Query#: How to customize the button in grouped grid 
We have checked your query and we suggest you customize the buttons inside the style tag with content as shown in the code snippet 
Note : In the below code we have customized the same icon for both expand and collapse action. You can customize different icons for these actions by defining content for the separate class.  
Code snippet: 
. . . . .  
<ej-grid id="FlatGrid" datasource="ViewBag.DataSource" allow-sorting="true" allow-paging="true" allow-grouping="true"> 
        <e-column field="OrderID" header-text="OrderID"></e-column> 
        <e-column field="EmployeeID" header-text="EmployeeID"></e-column> 
        <e-column field="CustomerID" header-text="CustomerID"></e-column> 
        <e-column field="ShipCity" header-text="ShipCountry"></e-column> 
        <e-column field="Freight" header-text="Freight" format="{0:C2}"></e-column> 
    .e-icon.e-gdiagonalnext:before, .e-icon.e-gnextforward:before  { // classname for the icons 
        content: "\e677";     // Define your customization here 
Please refer to the screenshot: 
Kindly refer the below sample: 
Our new generation EJ2 Grid Component 
We also would like to let you know about our next generation JavaScript product - Essential JS 2, in case if you are not aware of it. Essential JS 2 is fully re-written to be modular, responsive and lightweight.  
We suggest you look into our following product page for more details.  
Documentation page for ej2 Grid 
Demo page for ej2 Grid  
Please revert us, if you need more assistance on this. 
Gowri V L. 

NE Neider February 7, 2020 02:48 PM UTC

Thanks :)

GL Gowri Loganathan Syncfusion Team February 10, 2020 04:55 AM UTC

Hi Neider,

We are happy that you had achieved your requirement with our provided solution. 

Please revert us if you need more assistance on this. 

Gowri V L. 

Live Chat Icon For mobile
Up arrow icon