How to customize the button in the grouped grid?

[Neider]

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:

Code:

@{

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

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

    <e-summary-rows>

        <e-summary-row title="Total" show-caption-summary="true" show-total-summary="true">

            <e-summary-columns>

                <e-summary-column summary-type="Sum" format="{0:N2}" display-column="TransactAmount" datamember="TransactAmount" />

            </e-summary-columns>

        </e-summary-row>

    </e-summary-rows>

</ej-grid>

<script id="captionTemplate" type="text/x-jsrender">

    <div class="row col-md-12">

        <div class="col-md-6">

            {{:#data.items[0].ValueDate.toLocaleDateString("@(System.Globalization.CultureInfo.CurrentCulture.Name)")}}

        </div>

        <div class="col-md-6">

            {{:#data.items[0].TransactDate.toLocaleDateString("@(System.Globalization.CultureInfo.CurrentCulture.Name)")}}

        </div>

    </div>

</script>

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

Thanks.

[Gowri Loganathan]

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

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

</ej-grid> 

 

<style> 

 

    .e-icon.e-gdiagonalnext:before, .e-icon.e-gnextforward:before  { // classname for the icons 

 

        content: "\e677";     // Define your customization here 

 

    } 

</style> 

 

 

 

Please refer to the screenshot: 

 

 

 

 

Kindly refer the below sample: 

https://www.syncfusion.com/downloads/support/forum/151309/ze/Neider-151309140539960 

 

 

 

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.  

https://www.syncfusion.com/javascript-ui-controls 

Documentation page for ej2 Grid 

https://ej2.syncfusion.com/documentation/grid/getting-started/?no-cache=1 

Demo page for ej2 Grid  

https://ej2.syncfusion.com/demos/#/material/grid/grid-overview.html 

 

 

 

Please revert us, if you need more assistance on this. 

 

Regards, 

Gowri V L. 

 

[Neider]

Thanks :)

[Gowri Loganathan]

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. 

Regards, 

Gowri V L.