Custom Summary at the End of the DataGrid

[Sajith Dulanjaya]

How Can I add a custom summary at the end of the datagrid that uses some custom properties from the View Model that can be bound to the View?

My requirement is to align the cells of this custom summary with some of the exiting columns in the datagrid which is already using a data source.

And the values in the custom summary are not necessarily derived from the data that are bound with the datagrid.

e.g.

[Suja Venkatesan]

Hi Sajith,

You can achieve your requirement by adding custom template for Table summary rows. Please refer our user guidelines documentation regarding the Table Summary Template in the below link.

UG link: https://help.syncfusion.com/xamarin/datagrid/summary?cs-save-lang=1&cs-lang=csharp#table-summary-template

Please let us know if you need any further assistance.

Regards,

Suja

[Sajith Dulanjaya]

Hi Suja,

Thanks for the response. Can I use the summaries without specifying any aggregate as I already have the properties in the View Model  that are to be bound with View?

[Suja Venkatesan]

Hi Sajith,

We would like to let you know that SfDataGrid does not have direct support for the requirement “Summaries without specifying any aggregate, value from property in the View Model”. However you achieve your requirement with workaround using customtemplate for summaryrow as like below code snippet.

Code snippet:

XAML :

<sfgrid:SfDataGrid.TableSummaryTemplate>

                <DataTemplate>

                    <ViewCell>

                        <StackLayout Orientation="Horizontal" BackgroundColor="Gray">

                            <Label Text="{Binding Converter={x:StaticResource SummaryConverter}, ConverterParameter = {x:Reference sfGrid} }"

                                   TextColor="White"

                                   FontSize="Large"

                                   VerticalTextAlignment="Center"

                                   HorizontalTextAlignment="Start"

                                   LineBreakMode="NoWrap"

                                   HorizontalOptions="FillAndExpand"

                                   VerticalOptions="FillAndExpand">

                            </Label>

                        </StackLayout>

                    </ViewCell>

                </DataTemplate>

            </sfgrid:SfDataGrid.TableSummaryTemplate>

            <sfgrid:SfDataGrid.TableSummaryRows>

                <sfgrid:GridTableSummaryRow Title="Total Salary members"

                                            Position="Bottom"  

                                            Name="summary"

                                            ShowSummaryInRow="True">

                </sfgrid:GridTableSummaryRow>

            </sfgrid:SfDataGrid.TableSummaryRows>

C#:

   public class TableSummaryConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

        {

          var val=  ((parameter as SfDataGrid).BindingContext as ViewModel).Total;

            return "Total Amount : "+ val;

        }

 

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

        {

            return null;

        }

 

    }

We have attached a simple sample based on your requirements for your reference. Please have a look at this sample and let us know if you have any concerns in it.

Regards,

Suja

Attachment: Custom_summary_26e0f423.zip

[Sajith Dulanjaya]

Hi Suja,

Is it possible to have different templates for different GridTableSummaryRows?

I tried using different templates for GridSummaryColumns but I have a requirement that one of the rows spans multiple columns (and it has a lengthy text as well). 

Is there any workaround to come up with my solution? 

[Suja Venkatesan]

Hi Sajith,

Currently, We are validating the reported scenario on our end. We will update you with further details on or before June 14, 2022. We appreciate your patience until then.

Regards,

Suja

[Suja Venkatesan]

Hi Sajith,

We would like to let you know that you can assign different template for TableSummary by using DataTemplateSelector as like below code snippet.

Code snippet:

  <ContentPage.Resources>

        <local:TableSummaryConverter x:Key="SummaryConverter" />

        <local:MyTemplateSelector x:Key="TemplateSelect"/>

    </ContentPage.Resources>

   <StackLayout Orientation="Vertical">

        <sfgrid:SfDataGrid x:Name="sfGrid"

                       AllowSorting="True"

                       AutoGenerateColumns="False"

                           TableSummaryTemplate="{StaticResource TemplateSelect}"

                       ItemsSource="{Binding OrdersInfo}">

            <sfgrid:SfDataGrid.Columns>

                <sfgrid:GridTextColumn MappingName="ShipCountry" />

                <sfgrid:GridTextColumn MappingName="Customer" />

            </sfgrid:SfDataGrid.Columns>

            <sfgrid:SfDataGrid.TableSummaryRows>

                <sfgrid:GridTableSummaryRow Title="TotalSalarymembers"

                                            Position="Bottom"  

                                            Name="summary"

                                            ShowSummaryInRow="True">

                </sfgrid:GridTableSummaryRow>

                <sfgrid:GridTableSummaryRow Title="value"

                                            Position="Bottom"  

                                            Name="summary1"

                                            ShowSummaryInRow="True">

                </sfgrid:GridTableSummaryRow>

            </sfgrid:SfDataGrid.TableSummaryRows>

        </sfgrid:SfDataGrid>

    </StackLayout>

We have attached a modified sample for your reference. Please revert to us with more details if we misunderstood your requirements.

Regards,

Suja

Attachment: GettingStarted_d2370875.zip

[Sajith Dulanjaya]

Hi Suja,

Thanks for the sample.

Is it possible to use TableSummaryTemplate when I am using Converters and Custom Aggregates in other summary rows of the same SfDataGrid?

I have to use a few summary converters in some summary columns as I have to use some properties in the View Model  that are not directly related with the data source that is bound with the SfDataGrid.

And also I have to use some Custom Aggregates as I must use some currency formatting on our own (like getting the currency from the database which is not something equivalent to the C# standard currency symbols).

So, my basic requirement is to have a template only for a given (eg. Reference numbers summary row in the attached sample) summary row and a common one for all of the others (but they have their own data templates for the summary columns)

I have attached a sample source code herewith.

[Sajith Dulanjaya]

Sample Code is attached.

Attachment: DataGridSummarySample_281f319e.zip

[Lakshmi Natarajan]

Hi Sajith,

You can achieve your requirement by setting ShowSummaryInRow to True to display the summary row template for the Reference numbers row.

Refer to the following code snippets for more reference,

<!-- Reference Numbers -->

<sfdatagrid:GridTableSummaryRow Title="ReferenceNumbersRow"

                                        Position="Bottom"

                                        Name="ReferenceNumbersValueRow"

                                        ShowSummaryInRow="True">

 

...

</sfdatagrid:GridTableSummaryRow>

Output

To display the column templates, set the ShowSummaryInRow to False for other columns. Refer to the following user guidance document regarding the same,

UG links:

https://help.syncfusion.com/xamarin/datagrid/summary#displaying-summary-in-a-row

https://help.syncfusion.com/xamarin/datagrid/summary#displaying-summary-in-a-column

Also, you can refer to the following documentation to format the summary,

UG link: https://help.syncfusion.com/xamarin/datagrid/summary#formatting-summary

Please let us know if you need further assistance.

Regards,

Lakshmi Natarajan

[Sajith Dulanjaya]

Hi Lakshmi,

Thanks for the explanation and it works.

I have another query related to DataTemplate of the GridColumn.

Would it be possible to change the value of the template dynamically according to the value of the bound View Model via a converter?

I tried it but it does not work as expected.

It seems the converter always takes the previous value of the View Model's Property. I am not sure if that is caused by some thread synchronization issue or so.

Following are the code snippets:

<syncfusion:GridSummaryColumn Name="BankRemittanceAmount"

                                                                  MappingName="CashPayment"

                                                                  SummaryType="Custom">

                                        <syncfusion:GridSummaryColumn.Template>

                                            <DataTemplate>

                                                <Label FontSize="16"

                                                       VerticalOptions="Center"

                                                       VerticalTextAlignment="Center"

                                                       HorizontalOptions="EndAndExpand"

                                                       HorizontalTextAlignment="End"

                                                       Text="{Binding Converter={x:StaticResource BankRemittancesConverter}, ConverterParameter = {x:Reference dataGrid} }"

                                                       FontAttributes="Bold">

                                                </Label>

                                            </DataTemplate>

                                        </syncfusion:GridSummaryColumn.Template>

                                    </syncfusion:GridSummaryColumn>

In the Code-behind:

{

public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

{

if (value != null)

{

var dataGrid = parameter as SfDataGrid;

var bindingContext = dataGrid.BindingContext;

var totalBankRemittances = (bindingContext as SalesReportViewModel).TotalBankRemittances;

return totalBankRemittances;

}

return null;

}

public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture) => null;

}

And also I have set the LiveDataUpdateMode to AllowSummaryUpdate ​in the data grid (I'm not sure if it is applicable in this scenario as the value of the summary does not depend on the content of the collection that is bound with the data grid.

[Suja Venkatesan]

Hi Sajith,

We'd like to inform you that if you want to bind the viewmodel property, you can do so directly as shown in the code snippet below, and the value will be dynamically changed whenever you override the value of TotalBankRemittances. If you want perform any  data conversion of binded property then define converter.

Code Snippet:

<sfdatagrid:GridSummaryColumn.Template>

   <DataTemplate>

     <Label FontSize="16"

            VerticalOptions="Center"

            VerticalTextAlignment="Center"

            HorizontalOptions="EndAndExpand"

            HorizontalTextAlignment="End"

           Text="{Binding BindingContext.TotalBankRemittances, Source={x:Reference dataGrid}}"

           FontAttributes="Bold">

    </Label>

 </DataTemplate>

</sfdatagrid:GridSummaryColumn.Template>

We have attached a modified sample for your reference. Please have a look at this sample and let us know if you need any further assistance.

Regards,

Suja

Attachment: DataGridSummarySample_46179711.zip

[Sajith Dulanjaya]

Hi team,

Thanks for the support, I am able to achieve what I needed now.

[Suja Venkatesan]

Hi Sajith,

Thank you for the update. We are glad that our solution meets your requirement. Please let us know if you need further assistance. As always, we are happy to help you out.  

Regards,

Suja