Skip to content

Commit c795c8e

Browse files
naveenkumar-sanjeevirayannaveenkumar-sanjeevirayan
authored
Merge pull request #3563 from syncfusion-content/ColumnSummary
977594 - Included UG for displaying column summary with title
2 parents 78a7b9f + 7746f0b commit c795c8e

File tree

4 files changed

+274
-0
lines changed

4 files changed

+274
-0
lines changed

‎MAUI/DataGrid/Images/caption-summary/maui-datagrid-caption-column-summary-title.png‎

12.1 KB
Loading

‎MAUI/DataGrid/Images/group-summary/maui-datagrid-group-column-summary-title.png‎

12.1 KB
Loading

‎MAUI/DataGrid/Images/table-summary/maui-datagrid-table-column-summary-title.png‎

13.1 KB
Loading

‎MAUI/DataGrid/summaries.md‎

Lines changed: 274 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -369,6 +369,98 @@ public class GroupCaptionConverter : IValueConverter
369369

370370
![DataGrid with template loaded for individual caption summary column](Images\caption-summary\maui-datagrid-template-column.png)
371371

372+
### Displaying column summary with title
373+
374+
SfDataGrid supports displaying both column summaries and title summaries simultaneously. You can show column summary along with title by defining the [DataGridSummaryRow.Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridSummaryRow.html#Syncfusion_Maui_DataGrid_DataGridSummaryRow_Title) and DataGridSummaryRow.TitleColumnCount property, along with defining summary columns. Showing column summary along with title can be only supported if [DataGridSummaryRow.ShowSummaryInRow](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridSummaryRow.html#Syncfusion_Maui_DataGrid_DataGridSummaryRow_ShowSummaryInRow) is disabled.
375+
376+
In the code snippet below, DataGridSummaryRow.TitleColumnCount is set as 2, and [DataGridSummaryRow.Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridSummaryRow.html#Syncfusion_Maui_DataGrid_DataGridSummaryRow_Title) is defined along with summary columns.
377+
378+
{% tabs %}
379+
{% highlight xaml %}
380+
<dataGrid:SfDataGrid x:Name="dataGrid"
381+
ItemsSource="{Binding OrderItems}"
382+
AutoGenerateColumnsMode="None"
383+
SelectionMode="Single"
384+
GridLinesVisibility="Both"
385+
HeaderGridLinesVisibility="Both"
386+
AllowGroupExpandCollapse="True">
387+
388+
<dataGrid:SfDataGrid.Columns>
389+
<dataGrid:DataGridTextColumn MappingName="OrderId"
390+
HeaderText="Order ID" />
391+
<dataGrid:DataGridTextColumn MappingName="CustomerId"
392+
HeaderText="Customer ID"
393+
ColumnWidthMode="Auto" />
394+
<dataGrid:DataGridTextColumn MappingName="CustomerName"
395+
HeaderText="Customer Name"
396+
ColumnWidthMode="Auto" />
397+
</dataGrid:SfDataGrid.Columns>
398+
399+
<dataGrid:SfDataGrid.GroupColumnDescriptions>
400+
<dataGrid:GroupColumnDescription ColumnName="CustomerId" />
401+
</dataGrid:SfDataGrid.GroupColumnDescriptions>
402+
403+
<dataGrid:SfDataGrid.CaptionSummaryRow>
404+
<dataGrid:DataGridSummaryRow Title="{}{ColumnName} : {Key} - {ProductCount} Items" TitleColumnCount="2">
405+
<dataGrid:DataGridSummaryRow.SummaryColumns>
406+
<dataGrid:DataGridSummaryColumn Name="CustomerName"
407+
MappingName="CustomerName"
408+
Format="{}{Count}"
409+
SummaryType="CountAggregate" />
410+
<dataGrid:DataGridSummaryColumn Name="ProductCount"
411+
MappingName="ProductName"
412+
Format="{}{Count}"
413+
SummaryType="CountAggregate" />
414+
</dataGrid:DataGridSummaryRow.SummaryColumns>
415+
</dataGrid:DataGridSummaryRow>
416+
</dataGrid:SfDataGrid.CaptionSummaryRow>
417+
418+
</dataGrid:SfDataGrid>
419+
420+
{% endhighlight %}
421+
{% endtabs %}
422+
423+
{% tabs %}
424+
{% highlight c# %}
425+
426+
GridSummaryRow captionSummaryRow = new GridSummaryRow()
427+
{
428+
Title = "{ColumnName} : {Key} - {ProductCount} Items",
429+
TitleColumnCount = 2,
430+
SummaryColumns = new ObservableCollection<ISummaryColumn>()
431+
{
432+
new GridSummaryColumn()
433+
{
434+
Name = "CustomerName",
435+
MappingName = "CustomerName",
436+
SummaryType = SummaryType.CountAggregate,
437+
Format = "{Count}"
438+
},
439+
new GridSummaryColumn()
440+
{
441+
Name = "ProductCount",
442+
MappingName = "ProductName",
443+
SummaryType = SummaryType.CountAggregate,
444+
Format = "{Count}"
445+
}
446+
}
447+
};
448+
449+
dataGrid.CaptionSummaryRow = captionSummaryRow;
450+
451+
{% endhighlight %}
452+
{% endtabs %}
453+
454+
The following screenshot illustrates displaying summary columns with title at same time for `CaptionSummaryRow`.
455+
456+
![DataGrid with caption summary column and title](Images\caption-summary\maui-datagrid-caption-column-summary-title.png)
457+
458+
### Limitations
459+
460+
The following are the limitations of displaying column summary along with title at same time for DataGridSummaryRow:
461+
462+
* If FrozenColumnCount is defined as less than DataGridSummaryRow.TitleColumnCount, the title summary will span the range of FrozenColumnCount, since the spanned range and frozen range cannot vary.
463+
372464
## Group summary
373465

374466
`Group summary` values are calculated based on the records within each group. The summary information will be displayed at the bottom of each group. You can view the group summary row by expanding the corresponding group header. The data grid allows for the addition of any number of group summary rows.
@@ -662,6 +754,84 @@ public class GroupSummaryConverter : IValueConverter
662754

663755
![DataGrid with template loaded for individual group summary cell](Images\group-summary\maui-datagrid-column-template.png)
664756

757+
### Displaying column summary with title
758+
759+
SfDataGrid supports displaying both column summaries and title summaries simultaneously. You can show column summary along with title by defining the [DataGridSummaryRow.Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridSummaryRow.html#Syncfusion_Maui_DataGrid_DataGridSummaryRow_Title) and DataGridSummaryRow.TitleColumnCount property, along with defining summary columns. Showing column summary along with title can be only supported if [DataGridSummaryRow.ShowSummaryInRow](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridSummaryRow.html#Syncfusion_Maui_DataGrid_DataGridSummaryRow_ShowSummaryInRow) is disabled.
760+
761+
In the code snippet below, DataGridSummaryRow.TitleColumnCount is set as 2, and [DataGridSummaryRow.Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridSummaryRow.html#Syncfusion_Maui_DataGrid_DataGridSummaryRow_Title) is defined along with summary columns.
762+
763+
{% tabs %}
764+
{% highlight xaml %}
765+
<dataGrid:SfDataGrid x:Name="dataGrid"
766+
ItemsSource="{Binding OrderItems}"
767+
AutoGenerateColumnsMode="None"
768+
SelectionMode="Single"
769+
GridLinesVisibility="Both"
770+
HeaderGridLinesVisibility="Both"
771+
AllowGroupExpandCollapse="True">
772+
773+
<dataGrid:SfDataGrid.Columns>
774+
<dataGrid:DataGridTextColumn MappingName="OrderId"
775+
HeaderText="Order ID" />
776+
<dataGrid:DataGridTextColumn MappingName="CustomerId"
777+
HeaderText="Customer ID" />
778+
<dataGrid:DataGridTextColumn MappingName="CustomerName"
779+
HeaderText="Customer Name"
780+
ColumnWidthMode="Auto" />
781+
</dataGrid:SfDataGrid.Columns>
782+
783+
<dataGrid:SfDataGrid.GroupColumnDescriptions>
784+
<dataGrid:GroupColumnDescription ColumnName="CustomerId" />
785+
</dataGrid:SfDataGrid.GroupColumnDescriptions>
786+
787+
<dataGrid:SfDataGrid.GroupSummaryRows>
788+
<dataGrid:DataGridSummaryRow Title="Total Price: {PriceAmount} for {ProductCount} Products" TitleColumnCount="2">
789+
<dataGrid:DataGridSummaryRow.SummaryColumns>
790+
<dataGrid:DataGridSummaryColumn Name="CustomerName"
791+
MappingName="CustomerName"
792+
Format="{}{Count}"
793+
SummaryType="CountAggregate" />
794+
</dataGrid:DataGridSummaryRow.SummaryColumns>
795+
</dataGrid:DataGridSummaryRow>
796+
</dataGrid:SfDataGrid.GroupSummaryRows>
797+
798+
</dataGrid:SfDataGrid>
799+
{% endhighlight %}
800+
{% endtabs %}
801+
802+
{% tabs %}
803+
{% highlight c# %}
804+
805+
GridSummaryRow groupSummaryRow = new GridSummaryRow()
806+
{
807+
Title = "Total Price: {PriceAmount} for {ProductCount} Products",
808+
TitleColumnCount = 2,
809+
SummaryColumns = new ObservableCollection<ISummaryColumn>()
810+
{
811+
new GridSummaryColumn()
812+
{
813+
Name = "CustomerName",
814+
MappingName = "CustomerName",
815+
SummaryType = SummaryType.CountAggregate,
816+
Format = "{Count}"
817+
}
818+
}
819+
};
820+
821+
dataGrid.GroupSummaryRows.Add(groupSummaryRow);
822+
823+
{% endhighlight %}
824+
{% endtabs %}
825+
826+
The following screenshot illustrates displaying summary columns with title at same time for `GroupSummaryRows`.
827+
828+
![DataGrid with group summary column and title](Images\group-summary\maui-datagrid-group-column-summary-title.png)
829+
830+
### Limitations
831+
832+
The following are the limitations of displaying column summary along with title at same time for DataGridSummaryRow:
833+
834+
* If FrozenColumnCount is defined as less than DataGridSummaryRow.TitleColumnCount, the title summary will span the range of FrozenColumnCount, since the spanned range and frozen range cannot vary.
665835

666836
## Table summaries
667837

@@ -1112,6 +1282,110 @@ public class TableSummaryConverter : IValueConverter
11121282

11131283
N> The `DataTemplateSelector` can also be directly assigned to the `SfDataGrid.TableSummaryTemplate`. When using data template selector, performance issues occur as the conversion template views take time within the framework.
11141284

1285+
### Displaying column summary with title
1286+
1287+
SfDataGrid supports displaying both column summaries and title summaries simultaneously. You can show column summary along with title by defining the [DataGridTableSummaryRow.Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridSummaryRow.html#Syncfusion_Maui_DataGrid_DataGridSummaryRow_Title) and DataGridTableSummaryRow.TitleColumnCount property, along with defining summary columns. Showing column summary along with title can be only supported if [DataGridTableSummaryRow.ShowSummaryInRow](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridSummaryRow.html#Syncfusion_Maui_DataGrid_DataGridSummaryRow_ShowSummaryInRow) is disabled.
1288+
1289+
In the code snippet below, DataGridTableSummaryRow.TitleColumnCount is set as 2, and [DataGridTableSummaryRow.Title](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.DataGrid.DataGridSummaryRow.html#Syncfusion_Maui_DataGrid_DataGridSummaryRow_Title) is defined along with summary columns.
1290+
1291+
{% tabs %}
1292+
{% highlight xaml %}
1293+
<dataGrid:SfDataGrid x:Name="dataGrid"
1294+
ItemsSource="{Binding OrderItems}"
1295+
AutoGenerateColumnsMode="None"
1296+
SelectionMode="Single"
1297+
GridLinesVisibility="Both"
1298+
HeaderGridLinesVisibility="Both">
1299+
1300+
<dataGrid:SfDataGrid.Columns>
1301+
<dataGrid:DataGridTextColumn MappingName="OrderId"
1302+
HeaderText="Order ID" />
1303+
<dataGrid:DataGridTextColumn MappingName="CustomerId"
1304+
HeaderText="Customer ID" />
1305+
<dataGrid:DataGridTextColumn MappingName="CustomerName"
1306+
HeaderText="Customer Name"
1307+
ColumnWidthMode="Auto" />
1308+
</dataGrid:SfDataGrid.Columns>
1309+
1310+
<dataGrid:SfDataGrid.TableSummaryRows>
1311+
<dataGrid:DataGridTableSummaryRow Title="Total Price: {PriceAmount} for {ProductCount} products" TitleColumnCount="2" Position="Top">
1312+
<dataGrid:DataGridTableSummaryRow.SummaryColumns>
1313+
<dataGrid:DataGridSummaryColumn Name="CustomerName"
1314+
MappingName="CustomerName"
1315+
Format="{}{Count}"
1316+
SummaryType="CountAggregate" />
1317+
</dataGrid:DataGridTableSummaryRow.SummaryColumns>
1318+
</dataGrid:DataGridTableSummaryRow>
1319+
<dataGrid:DataGridTableSummaryRow Title="Total Price: {PriceAmount} for {ProductCount} products" TitleColumnCount="2" Position="Bottom">
1320+
<dataGrid:DataGridTableSummaryRow.SummaryColumns>
1321+
<dataGrid:DataGridSummaryColumn Name="CustomerName"
1322+
MappingName="CustomerName"
1323+
Format="{}{Count}"
1324+
SummaryType="CountAggregate" />
1325+
</dataGrid:DataGridTableSummaryRow.SummaryColumns>
1326+
</dataGrid:DataGridTableSummaryRow>
1327+
</dataGrid:SfDataGrid.TableSummaryRows>
1328+
1329+
</dataGrid:SfDataGrid>
1330+
{% endhighlight %}
1331+
{% endtabs %}
1332+
1333+
{% tabs %}
1334+
{% highlight c# %}
1335+
1336+
GridTableSummaryRow topSummaryRow = new GridTableSummaryRow()
1337+
{
1338+
ShowSummaryInRow = false,
1339+
Position = TableSummaryRowPosition.Top,
1340+
Title = "Total Price : {PriceAmount} for {ProductCount} products",
1341+
TitleColumnCount = 2,
1342+
SummaryColumns = new ObservableCollection<ISummaryColumn>()
1343+
{
1344+
new GridSummaryColumn()
1345+
{
1346+
Name = "CustomerName",
1347+
MappingName = "CustomerName",
1348+
SummaryType = SummaryType.CountAggregate,
1349+
Format = "{Count:d}"
1350+
}
1351+
}
1352+
};
1353+
1354+
dataGrid.TableSummaryRows.Add(topSummaryRow);
1355+
1356+
GridTableSummaryRow bottomSummaryRow = new GridTableSummaryRow()
1357+
{
1358+
ShowSummaryInRow = false,
1359+
Position = TableSummaryRowPosition.Bottom,
1360+
Title = "Total Price : {PriceAmount} for {ProductCount} products",
1361+
TitleColumnCount = 2,
1362+
SummaryColumns = new ObservableCollection<ISummaryColumn>()
1363+
{
1364+
new GridSummaryColumn()
1365+
{
1366+
Name = "CustomerName",
1367+
MappingName = "CustomerName",
1368+
SummaryType = SummaryType.CountAggregate,
1369+
Format = "{Count:d}"
1370+
}
1371+
}
1372+
};
1373+
1374+
dataGrid.TableSummaryRows.Add(bottomSummaryRow);
1375+
1376+
{% endhighlight %}
1377+
{% endtabs %}
1378+
1379+
The following screenshot illustrates displaying summary columns with title at same time for `TableSummaryRows`.
1380+
1381+
![DataGrid with table summary column and title](Images\table-summary\maui-datagrid-table-column-summary-title.png)
1382+
1383+
### Limitations
1384+
1385+
The following are the limitations of displaying column summary along with title at same time for DataGridTableSummaryRow:
1386+
1387+
* If FrozenColumnCount is defined as less than DataGridTableSummaryRow.TitleColumnCount, the title summary will span the range of FrozenColumnCount, since the spanned range and frozen range cannot vary.
1388+
11151389
## Formatting summary
11161390

11171391
In the following sections, the formatting is explained using the `TableSummary`.

0 commit comments

Comments
 (0)