Merge columns and fill custom data into unbound rows

[Sajith Dulanjaya]

Hi,

My requirement is as follows:

I have bound a collection to a SfDataGrid (MVVM). I need to add some additional rows at the bottom as fixed rows. Data for those rows are bound from the same VM.

Some of these additional rows have to be aligned with the exiting columns in the data grid and some rows need column spanning as well.

Note that data for the unbound columns are not always derived from the existing bound data.

Please refer the attached screenshot.

It is appreciated if someone can guide me on how to accomplish the above requirement.

[Suja Venkatesan]

Hi Sajith,

We would like to let you know that SfDataGrid does not have direct support for merge columns. You can achieve your requirement by defining GridTableSummaryRows with custom summary template as like below code snippet.

Code Snippet:

  <sfgrid:SfDataGrid.TableSummaryRows>

                <sfgrid:GridTableSummaryRow Name="TableSummary" ShowSummaryInRow="False">

                    <sfgrid:GridTableSummaryRow.SummaryColumns>

                        <sfgrid:GridSummaryColumn Name="TableSummary"

                                      MappingName="OrderDate"

                                     SummaryType="Custom">

                            <sfgrid:GridSummaryColumn.Template>

                                <DataTemplate>

                                    <StackLayout Orientation="Horizontal" >

                                        <Label Text="total Sales"

                                             FontSize="Small"

                                            VerticalTextAlignment="Center"

                                            HorizontalTextAlignment="Start"

                                            LineBreakMode="NoWrap"

                                            HorizontalOptions="FillAndExpand"

                                            VerticalOptions="FillAndExpand">

                                        </Label>

                                    </StackLayout>

                                </DataTemplate>

                            </sfgrid:GridSummaryColumn.Template>

                        </sfgrid:GridSummaryColumn>

                        <sfgrid:GridSummaryColumn

                                      MappingName="Cash"

                                     SummaryType="Custom">

                            <sfgrid:GridSummaryColumn.Template>

                                <DataTemplate>

                                    <StackLayout Orientation="Horizontal">

                                        <Label Text="100"

                                           FontSize="Small"

                                            VerticalTextAlignment="Center"

                                            HorizontalTextAlignment="Start"

                                            LineBreakMode="NoWrap"

                                            HorizontalOptions="FillAndExpand"

                                            VerticalOptions="FillAndExpand">

                                        </Label>

                                    </StackLayout>

                                </DataTemplate>

                            </sfgrid:GridSummaryColumn.Template>

                        </sfgrid:GridSummaryColumn>

                    </sfgrid:GridTableSummaryRow.SummaryColumns>

…

Please refer our user guidelines documentation regarding GridTableSummaryRow in the below reference link.

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

We have attached a simple sample for your reference. Please have a look at this sample and revert to us with more details and code snippets related to SFDataGrid if we misunderstood your requirement.

Regards

Suja.

Attachment: GettingStarted_74e78aef.zip