DataGridColumn: Add AggregateTemplate (#5350)

* DataGridColumn | Add AggregateTemplate | Demo | Add example of usage * Release notes DataGridColumn AggregateTemplate * Docs : AggregateTemplate
Megabit · Mar 9, 2024 · 10373b1 · 10373b1
1 parent fbf0b38
commit 10373b1
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 12 deletions.
diff --git a/Demos/Blazorise.Demo/Pages/Tests/DataGrid/DataGridPage.razor b/Demos/Blazorise.Demo/Pages/Tests/DataGrid/DataGridPage.razor
@@ -245,11 +245,7 @@
                         </Span>
                     </EmptyFilterTemplate>
                     <DataGridAggregates>
-                        <DataGridAggregate Field="@nameof( Employee.Email )" Aggregate="DataGridAggregateType.Count">
-                            <DisplayTemplate>
-                                @($"Total Emails: {context.Value}")
-                            </DisplayTemplate>
-                        </DataGridAggregate>
+                        <DataGridAggregate Field="@nameof( Employee.Email )" Aggregate="DataGridAggregateType.Count" />
                         <DataGridAggregate TItem="Employee" Field="@nameof( Employee.Salary )"
                                            AggregationFunction=@((values,col)=>values?.Where(v=>v.IsActive)?.Sum(v=>v.Salary) ?? 0m)
                                            DisplayFormatProvider="@System.Globalization.CultureInfo.GetCultureInfo("fr-FR")">
@@ -266,6 +262,9 @@
                             <MultiSelectTemplate>
                                 <Check TValue="bool" Checked="@context.IsSelected" CheckedExpression="() => context.IsSelected" Indeterminate="@context.IsIndeterminate" CheckedChanged="@context.SelectedChanged"></Check>
                             </MultiSelectTemplate>
+                            <AggregateTemplate>
+                                <Span TextWeight="TextWeight.Bold">@(selectedEmployees?.Count ?? 0)</Span>
+                            </AggregateTemplate>
                         </DataGridMultiSelectColumn>
                         <DataGridCommandColumn PreventRowClick>
                             <NewCommandTemplate>
@@ -286,6 +285,9 @@
                             <ClearFilterCommandTemplate>
                                 <Button Color="Color.Warning" Clicked="@context.Clicked">@context.LocalizationString</Button>
                             </ClearFilterCommandTemplate>
+                            <AggregateTemplate>
+                                <Span TextWeight="TextWeight.Bold">Totals:</Span>
+                            </AggregateTemplate>
                         </DataGridCommandColumn>
                         <DataGridColumn TextAlignment="TextAlignment.Center" Field="@nameof( Employee.Id )" Caption="#" Sortable="false" Width="60px" PreventRowClick />
                         <DataGridColumn Field="@nameof( Employee.FirstName )" Caption="First Name" Validator="@CheckFirstName" Editable>
@@ -294,7 +296,11 @@
                             </FilterTemplate>
                         </DataGridColumn>
                         <DataGridColumn Field="@nameof( Employee.LastName )" Caption="Last Name" Editable ValidationPattern="[A-Za-z]{3}" />
-                        <DataGridColumn Field="@nameof( Employee.Email )" Caption="Email" Editable EditFieldColumnSize="ColumnSize.IsFull.OnDesktop" />
+                        <DataGridColumn Field="@nameof( Employee.Email )" Caption="Email" Editable EditFieldColumnSize="ColumnSize.IsFull.OnDesktop" >
+                            <AggregateTemplate>
+                                <Icon Name="@IconName.Mail"></Icon> @($"{context.Value}")
+                            </AggregateTemplate>
+                            </DataGridColumn>
                         <DataGridColumn Field="@nameof( Employee.City )" Caption="City" Editable>
                             <CaptionTemplate>
                                 <Icon Name="IconName.City" /> @context.Caption

diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/DataGridApi.razor b/Documentation/Blazorise.Docs/Pages/Docs/Extensions/DataGrid/DataGridApi.razor
@@ -524,6 +524,9 @@
     <DocsAttributesItem Name="AggregateCellStyle" Type="string">
         Custom style for the aggregate cell.
     </DocsAttributesItem>
+    <DocsAttributesItem Name="AggregateTemplate" Type="RenderFragment<AggregateContext<TItem>>">
+        Template for aggregate values.
+    </DocsAttributesItem>
     <DocsAttributesItem Name="DisplayTemplate" Type="RenderFragment<TItem>">
         Template for custom cell display formating.
     </DocsAttributesItem>

diff --git a/Documentation/Blazorise.Docs/Pages/News/2024-02-15-release-notes-150.razor b/Documentation/Blazorise.Docs/Pages/News/2024-02-15-release-notes-150.razor
@@ -127,6 +127,15 @@
     Enable Column Chooser by setting <Code>ColumnChooser</Code> to true to allow users to show or hide columns in the DataGrid.
 </Paragraph>
 
+<Heading Size="HeadingSize.Is4">
+    4. DataGridColumn AggregateTemplate
+</Heading>
+
+<Paragraph>
+    Introduced an <Code>AggregateTemplate</Code> Parameter to the <Code>DataGridColumn</Code>.
+    This new Parameter fixes a gap in functionality where it was not possible to set an aggregate template for the <Code>DataGridColumn</Code> and <Code>DataGridMultiSelectColumn</Code>
+</Paragraph>
+
 <Heading Size="HeadingSize.Is3">
     Indeterminate progress bars
 </Heading>

diff --git a/Source/Extensions/Blazorise.DataGrid/DataGridColumn.cs b/Source/Extensions/Blazorise.DataGrid/DataGridColumn.cs
@@ -765,6 +765,11 @@ public SortDirection CurrentSortDirection
     /// </summary>
     [Parameter] public IFluentGap AggregateGap { get; set; }
 
+    /// <summary>
+    /// Template for aggregate values.
+    /// </summary>
+    [Parameter] public RenderFragment<AggregateContext<TItem>> AggregateTemplate { get; set; }
+
     /// <summary>
     /// Template for custom cell display formatting.
     /// </summary>

diff --git a/Source/Extensions/Blazorise.DataGrid/_DataGridAggregateRow.razor b/Source/Extensions/Blazorise.DataGrid/_DataGridAggregateRow.razor
@@ -6,16 +6,23 @@
     {
         @if ( column.ColumnType == DataGridColumnType.Command )
         {
-            @if ( ParentDataGrid.IsCommandVisible )
-            {
-                <TableRowCell></TableRowCell>
-            }
+            <TableRowCell Class="@column.AggregateCellClass" Style="@column.BuildAggregateCellStyle()" TextAlignment="@column.AggregateCellTextAlignment" VerticalAlignment="@column.AggregateCellVerticalAlignment" Display="@column.AggregateCellDisplay" Flex="@column.AggregateCellFlex" Gap="@column.AggregateCellGap" FixedPosition="@column.FixedPosition" Width="@column.BuildCellFluentSizing()">
+                @if(column.AggregateTemplate is not null )
+                {
+                    @column.AggregateTemplate( new( column.Field, null ) )
+                }
+            </TableRowCell>
         }
         else if ( column.ColumnType == DataGridColumnType.MultiSelect )
         {
             @if ( ParentDataGrid.MultiSelect )
             {
-                <TableRowCell></TableRowCell>
+                <TableRowCell Class="@column.AggregateCellClass" Style="@column.BuildAggregateCellStyle()" TextAlignment="@column.AggregateCellTextAlignment" VerticalAlignment="@column.AggregateCellVerticalAlignment" Display="@column.AggregateCellDisplay" Flex="@column.AggregateCellFlex" Gap="@column.AggregateCellGap" FixedPosition="@column.FixedPosition" Width="@column.BuildCellFluentSizing()">
+                    @if ( column.AggregateTemplate is not null )
+                    {
+                        @column.AggregateTemplate( new( column.Field, null ) )
+                    }
+                </TableRowCell>
             }
         }
         else
@@ -28,7 +35,11 @@
                     {
                         var aggregateValue = Calculate( aggregateColumn, column );
 
-                        @if ( aggregateColumn.DisplayTemplate != null )
+                        @if ( column.AggregateTemplate is not null )
+                        {
+                            @column.AggregateTemplate( new( column.Field, aggregateValue ) );
+                        }
+                        else if ( aggregateColumn.DisplayTemplate != null )
                         {
                             @aggregateColumn.DisplayTemplate( new( column.Field, aggregateValue ) )
                         }