Custom group header

[Neider]

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)">

   

   

       

           

               

           

       

   

Thanks.

SIGN IN To post a reply.

6 Replies Oldest first

---

NE Neider January 22, 2020 04:52 PM

@{

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

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

---

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

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. 

 

Reference Link : https://ej2.syncfusion.com/aspnetcore/documentation/grid/grouping/?no-cache=1#caption-template 

 

Using above link you can achieve your requirement. 

 

If still you need any customization, please get back to us. 

 

Regards, 

Balaji Sekar. 

---

NE Neider January 27, 2020 02:44 PM

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

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

        </div>

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

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

        </div>

    </div>

</script>

---

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

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> 

            <div id="captionRow" class="row col-md-6"> 

                ${format(data)} 

             </div> 

        </div> 

    </script> 

 

<script> 

    function format(data) { 

        return  ej.base.Internationalization.prototype.formatDate(data.items[0].OrderDate, {format:"MM/dd/yyyy"} ) 

    } 

</script> 

 

Output image: 

 

 

 

 

Sample link:   https://www.syncfusion.com/downloads/support/forum/150879/ze/TestSample-668120890 

 

Reference link:  https://ej2.syncfusion.com/aspnetcore/documentation/common/internationalization/?no-cache=1 

 

Please get back to us, if you need any further assistance. 

 

Regards, 

Balaji Sekar. 

---

NE Neider January 28, 2020 08:48 AM

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

---

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

  

Hi Neider, 

  

We glad that your issue has been fixed.  

  

Please get back to us if you require further other assistance from us. 

  

Regards, 

Balaji Sekar. 

SIGN IN To post a reply.

• 6 Replies
• 2 Participants
• Want to subscribe?
  SIGN IN
• Created by
  NE Neider
• Platform
  ASP.NET Core - EJ 2
• Control
  DataGrid
• Created On
  Jan 22, 2020 04:34 PM
• Last Activity On
  Jan 29, 2020 04:34 AM

[Neider]

@{

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

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

[Balaji Sekar]

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. 

 

Reference Link : https://ej2.syncfusion.com/aspnetcore/documentation/grid/grouping/?no-cache=1#caption-template 

 

Using above link you can achieve your requirement. 

 

If still you need any customization, please get back to us. 

 

Regards, 

Balaji Sekar. 

[Neider]

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

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

        </div>

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

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

        </div>

    </div>

</script>

[Balaji Sekar]

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> 

            <div id="captionRow" class="row col-md-6"> 

                ${format(data)} 

             </div> 

        </div> 

    </script> 

 

<script> 

    function format(data) { 

        return  ej.base.Internationalization.prototype.formatDate(data.items[0].OrderDate, {format:"MM/dd/yyyy"} ) 

    } 

</script> 

 

Output image: 

 

 

 

 

Sample link:   https://www.syncfusion.com/downloads/support/forum/150879/ze/TestSample-668120890 

 

Reference link:  https://ej2.syncfusion.com/aspnetcore/documentation/common/internationalization/?no-cache=1 

 

Please get back to us, if you need any further assistance. 

 

Regards, 

Balaji Sekar. 

[Neider]

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

[Balaji Sekar]

  

Hi Neider, 

  

We glad that your issue has been fixed.  

  

Please get back to us if you require further other assistance from us. 

  

Regards, 

Balaji Sekar.