Change value in captions group and summary group

Hello, I want to know how can I modified the value showed in GroupCaption and in the Summary Column. This is the way I want to change it:



In the Grid above I want to put my own custom values in the last column shown in red, in the Caption Groups and in the Summary Group, each value is diferent. How can I do that?

This is my code that to create the grid:

                 locale="@(System.Globalization.CultureInfo.CurrentCulture.Name.ToString())">
           
            () {"excelExport" })>
           
               
               
               
               
               
               
               
               
               
               
               
               
           
           
               
                   
                       
                       
                       
                       
                       
                       
                                                
                   
               
           
       

@{
        var GroupedCols = new List() { "PClass", "ProductName" };
    }

7 Replies

MF Mohammed Farook J Syncfusion Team May 8, 2020 10:50 AM UTC

Hi Neider, 
 
Thanks for contacting Syncfusion support. 
 
You can customize the group caption template and summary  group caption by the following way. 
 
 
Group caption template 
 
<ejs-grid id="Grid" dataSource="@ViewBag.Datasource" allowGrouping="true" allowPaging="true"> 
 
 
    <e-grid-aggregates> 
        <e-grid-aggregate> 
            <e-aggregate-columns> 
                <e-aggregate-column field="Freight" type="Sum" groupFooterTemplate="Total units: ${Sum}" footerTemplate="Sum:${Sum}"></e-aggregate-column> 
                <e-aggregate-column field="CustomerID" groupFooterTemplate="custom message" footerTemplate="Truecount:${Truecount}" type="Truecount" ></e-aggregate-column> 
            </e-aggregate-columns> 
        </e-grid-aggregate> 
 
    </e-grid-aggregates> 
    <e-grid-groupsettings captionTemplate="#captiontemplate"></e-grid-groupsettings> 
. . . 
 
</ejs-grid> 
 
<script id="captiontemplate" type="text/x-template"> 
    ${if( field=="CustomerID")} custom messge ${else} ${field} of ${key} contains ${count} item 
    ${/if} 
 
</script> 
 
 
 
In the code example we can customized the group caption by using captionTemplate in groupSettings. 
 
 
Summary Group Caption 
 
 
<ejs-grid id="Grid" dataSource="@ViewBag.Datasource" allowGrouping="true" allowPaging="true"> 
 
 
    <e-grid-aggregates> 
        <e-grid-aggregate> 
            <e-aggregate-columns> 
                <e-aggregate-column field="Freight" type="Sum" groupFooterTemplate="Total units: ${Sum}" footerTemplate="Sum:${Sum}"></e-aggregate-column> 
                <e-aggregate-column field="CustomerID" groupFooterTemplate="custom message" footerTemplate="Truecount:${Truecount}" type="Truecount" ></e-aggregate-column> 
            </e-aggregate-columns> 
        </e-grid-aggregate> 
 
    </e-grid-aggregates> 
 
</ejs-grid> 
 
 
 
Please find the documentation  
 
 
 
Regards, 
J Mohammed Farook  



NE Neider May 8, 2020 08:15 PM UTC

Thank you. How can I do that using the js1 version of syncfusion and using jsRender in the template?

That doesn't solve my problem, I'll show my grid code again, because before didn't paste well:




Target:



NE Neider May 8, 2020 08:16 PM UTC

  @{
        var GroupedCols = new List<string>() { "PClass", "ProductName" };
    }     

<ej-grid id="GridT" allow-resizing="true" allow-multiple-exporting="true" action-complete="Complete" databound="dataBound" toolbar-click="toolbarClick1" is-responsive="false" allow-grouping="true" enable-alt-row="false"
                 locale="@(System.Globalization.CultureInfo.CurrentCulture.Name.ToString())">
            <e-group-settings caption-format="#captiontemplate" show-drop-area="false" show-grouped-column="false" grouped-columns="GroupedCols"></e-group-settings>
            <e-toolbar-settings show-toolbar="true" toolbar-items=@(new List<string>() {"excelExport" })></e-toolbar-settings>
            <e-columns>
                <e-column field="ProductAndRate" header-text="@Localizer["Product"].Value" text-align="Left" width="200" template-id="#ppTemplateDetails"></e-column>
                <e-column field="PClass" header-text="ProductClass" visible="false"></e-column>
                <e-column field="ProClass" header-text="ProductClass" visible="false"></e-column>
                <e-column field="ProductName" header-text="ProductName" visible="false"></e-column>
                <e-column field="PreviousBalance" header-text="@Localizer["Previous Balance"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="BoughtAmount" header-text=" @Localizer["Bought Amount"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="CalculatedValuation" header-text=" @Localizer["Valuation Amount"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="PaidRevenueAmount" header-text=" @Localizer["Paid Amount"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="OtherIncome" header-text=" @Localizer["Other Income"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="SoldAmount" header-text=" @Localizer["Sold Amount"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="BalanceAmount" header-text=" @Localizer["Final Balance"].Value ($)" text-align="Right" format="{0:N2}"></e-column>
                <e-column field="XIRR_value" header-text="@Localizer["TIR"].Value" text-align="Right" format="{0:P2}"></e-column>
            </e-columns>
            <e-summary-rows>
                <e-summary-row title="Total" show-total-summary="true" show-caption-summary="true">
                    <e-summary-columns>
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="PreviousBalance" datamember="PreviousBalance" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="BoughtAmount" datamember="BoughtAmount" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="CalculatedValuation" datamember="CalculatedValuation" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="PaidRevenueAmount" datamember="PaidRevenueAmount" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="OtherIncome" datamember="OtherIncome" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="SoldAmount" datamember="SoldAmount" />
                        <e-summary-column summary-type="Sum" format="{0:N2}" display-column="BalanceAmount" datamember="BalanceAmount" />
                    </e-summary-columns>
                </e-summary-row>
            </e-summary-rows>
        </ej-grid>


NE Neider May 8, 2020 10:34 PM UTC

With the code that you share with me, I only could modify the tittle of the group.




FS Farveen Sulthana Thameeztheen Basha Syncfusion Team May 11, 2020 02:36 PM UTC

Hi Neider, 

Query#:- How can I do that using the js1 version of syncfusion and using jsRender in the template? 

#Group Caption Format:- 

To achieve this requirement we suggest you to use CaptionFormat property of group-settings property. Refer to the documentation Link for more information :- 
 
#Summary Group Caption:-  

To customize the Summary Group caption we suggest you to use template property of e-summary-columns.  Refer to the documentation Link for more information :- 
 
If the above documentation link doesn’t meet your requirement, please get back to us with further details. 

Regards, 
Farveen sulthana T 



NE Neider May 11, 2020 03:29 PM UTC

Hello, thanks for answering, I already check those, but I have not been able to exclude certain groupings. 
For example with the grid bellow I want to check if the grouping name is "Renta fija" and in this case change the value that I want to show, or check if the group is in the highest level or in the lowest level and based on it change the value.




FS Farveen Sulthana Thameeztheen Basha Syncfusion Team May 12, 2020 04:02 PM UTC

Hi Neider, 

Query#:- check if the grouping name is "Renta fija" and in this case change the value that I want to show, or check if the group is in the highest level or in the lowest level and based on it change the value. 
 
From your query we understood you need to change corresponding Field Value based on Grouped Items. We can achieve the same using CaptionFormat of group-settings as we suggested in previous update. Based on number of records under the current Group we have customized the group caption value. 

Refer to the code example:- 

<ej-grid id="FlatGrid" datasource="ViewBag.datasource"  show-summary="true" allow-grouping="true" group-settings ="@(new GroupSettings { GroupedColumns= new List<string>() { "EmployeeID"}, CaptionFormat="#template" })" allow-paging="true"  action-complete="databound"> 
            <e-summary-rows> 
                .   .    .   
            </e-summary-rows> 
            <e-columns> 
                <e-column field="OrderID" is-primary-key="true" header-text="Order ID" text-align="Right" width="90"></e-column> 
                <e-column field="CustomerID" header-text="CustomerID" width="90"></e-column> 
                <e-column field="EmployeeID" header-text="Employee ID" text-align="Right" width="80"></e-column> 
                .    .     . 
           </e-columns> 
        </ej-grid> 
        <script id="template" type="text/x-jsrender"> 
            {{:headerText}}: {{:count}} Items- {{if count == 1 }} MyValue{{:key}} {{else}} OtherValue{{:key}} {{/if}}     //based on Items count we have changed the Caption value 
        </script> 

Refer to the screenshot:- 
 
 
 
We have prepared sample with simple data. Refer to the sample Link:- 
 
Please refer the below table for the possible values that can be used in group caption template. 
{{:field}} 
Defines the field name of the current group column(in your case Perfil) 
{{:key}} 
Defines the current group value(in your case Profile A) 
{{:count}} 
Defines the number of records under the current group 
{{:headerText}} 
Defines the headerText value of the  current group column(header text of the column with field Perfil) 
 
If we misunderstood your query, please share us the detailed Explanation of your requirement and Demonstrate based on our provided sample for better understanding. 
 
Regards, 
Farveen sulthana T 


Loader.
Up arrow icon