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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom group header

Thread ID:

Created:

Updated:

Platform:

Replies:

150879 Jan 22,2020 09:34 PM UTC Jan 29,2020 09:34 AM UTC ASP.NET Core - EJ 2 6
loading
Tags: DataGrid
Neider
Asked On January 22, 2020 09:42 PM UTC

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.



Neider
Replied On 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-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 [Syncfusion]
Replied On 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. 
 
Regards, 
Balaji Sekar. 


Neider
Replied On 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">
            {{:#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 [Syncfusion]
Replied On 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> 
            <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: 
 
 
 
 
 
 
Please get back to us, if you need any further assistance. 
 
Regards, 
Balaji Sekar. 


Neider
Replied On January 28, 2020 01:48 PM UTC

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

Balaji Sekar [Syncfusion]
Replied On 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. 
  
Regards, 
Balaji Sekar. 


CONFIRMATION

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