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

Custom group header

Hello, I have a grid with some grouped columns and I want to add to the header of that group some data that is on the table. Let me show you. This is the grid that I have:

But I want to show additional information in the header of each group like this, adding the red color info:

And this is my code that create the grid:

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

         allow-filtering="true" allow-multiple-exporting="true" toolbar-click="toolbarClick1" databound="dataBound">
    () {"excelExport" })>
                  tooltip="@Localizer["Transact date"].Value (@Bancavalor.Resources.MyResources.LocalFormatDate)">
                  tooltip="@Localizer["Value date"].Value (@Bancavalor.Resources.MyResources.LocalFormatDate)">
                  tooltip="@Localizer["Creation date"].Value (@Bancavalor.Resources.MyResources.LocalFormatDate)">


6 Replies

NE Neider January 22, 2020 09:52 PM UTC

    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="{{:key}}" 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="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="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="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="TransactAmount" header-text="@Localizer["Transaction amount"].Value" text-align="Right" 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" />

BS Balaji Sekar Syncfusion Team January 23, 2020 07:06 PM UTC

Hi Neider, 
Greetings from Syncfusion forum. 
We have validated and suspect your requirement is customization in grouped header text. So for this case you can customize the group caption by using the captionTemplate property of e-grid-groupsettings tag helper and we have already explained in this scenario in below documentation link. Please refer it. 
Using above link you can achieve your requirement. 
If still you need any customization, please get back to us. 
Balaji Sekar. 

NE Neider January 27, 2020 07:44 PM UTC

Thank you, I could do it as I show bellow:

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

BS Balaji Sekar Syncfusion Team January 28, 2020 07:14 AM UTC

Hi Neider, 
Yeah, We're glad to hear that your problem has been resolved. 
You  can also achieve this requirement using captionTemaplate property and have formatted required caption date value using our formatDate method in internationalization.  In this method we have to pass required date value and format. 
Please refer to the below code and sample link. 
<script id="captiontemplate" type="text/x-template"> 
   // you can customize whatever you want.. 
        <div class="row col-md-12"> 
            <div class="row col-md-6"> 
                <span>  ${field} - ${key} </span> 
            <div id="captionRow" class="row col-md-6"> 
    function format(data) { 
        return  ej.base.Internationalization.prototype.formatDate(data.items[0].OrderDate, {format:"MM/dd/yyyy"} ) 
Output image: 
Please get back to us, if you need any further assistance. 
Balaji Sekar. 

NE Neider January 28, 2020 01:48 PM UTC

Thanks, it's better in that way, it's more flexible and readable.

BS Balaji Sekar Syncfusion Team January 29, 2020 09:34 AM UTC

Hi Neider, 
We glad that your issue has been fixed.  
Please get back to us if you require further other assistance from us. 
Balaji Sekar. 

Live Chat Icon For mobile
Up arrow icon