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.
Syncfusion Feedback

How to customize the button in the grouped grid?

Thread ID:





151309 Feb 5,2020 10:53 PM UTC Feb 10,2020 04:55 AM UTC ASP.NET Core 3
Tags: Grid
Asked On February 5, 2020 10:53 PM UTC

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.


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

Replied On February 7, 2020 02:48 PM UTC

Thanks :)

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


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.

Please sign in to access our forum

This page will automatically be redirected to the 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

Live Chat Icon For mobile
Live Chat Icon