How to customize the button in the grouped grid?

Neider

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:

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>

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

</div>

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

</div>

</script>

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

Thanks.

Reply | Reply with quote

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

Reply | Reply with quote

Neider

Replied On February 7, 2020 02:48 PM UTC

Thanks :)

Reply | Reply with quote

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.

Regards,

Gowri V L.

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
151309	Feb 5,2020 10:53 PM UTC	Feb 10,2020 04:55 AM UTC	ASP.NET Core	3

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US