diff --git a/blazor/datagrid/images/group-caption-alignment.gif b/blazor/datagrid/images/group-caption-alignment.gif new file mode 100644 index 0000000000..774c0b28e3 Binary files /dev/null and b/blazor/datagrid/images/group-caption-alignment.gif differ diff --git a/blazor/datagrid/templates-excel-export.md b/blazor/datagrid/templates-excel-export.md index ac5eb40d30..1bf00c7d0e 100644 --- a/blazor/datagrid/templates-excel-export.md +++ b/blazor/datagrid/templates-excel-export.md @@ -260,6 +260,166 @@ public class OrderData ![Exporting with group caption template](./images/group-caption.gif) +## Customizing and Aligning Group Caption Templates in Excel Export + +The Syncfusion® Blazor DataGrid supports aligning exported grouped data along with a custom caption template in an Excel document. This capability enables the application of custom formatting and horizontal alignment to group captions, providing enhanced visual presentation and improved readability of exported hierarchical data in Excel spreadsheets. + +### Steps to Customize and Align Group Caption Text in Excel Export + +1. Trigger the Excel export by handling the [OnToolbarClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_OnToolbarClick) event. +2. Initiate the export using the [ExportToExcelAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_ExportToExcelAsync_Syncfusion_Blazor_Grids_ExcelExportProperties_) method. +3. Customize the exported group caption by handling the [ExcelGroupCaptionTemplateInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridEvents-1.html#Syncfusion_Blazor_Grids_GridEvents_1_ExcelGroupCaptionTemplateInfo) event. +4. Apply horizontal alignment to the caption text using `args.Cell.CellStyle.HAlign`. +5. Specify the alignment value using the `Syncfusion.ExcelExport.HAlignType` enumeration (e.g., Left, Center, Right, General, Justify). +6. Optionally, enhance the caption style by applying additional formatting via +`args.Cell.CellStyle` properties such as: + * `Bold` + * `FontColor` + * `FontSize` + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} + +@using Syncfusion.Blazor.Grids +@using Syncfusion.Blazor.Navigations + + + + + + @{ + var group = context as CaptionTemplateContext; + } + + @group.Key + + + + + + + + + + + + + + + + + @{ + var agg = (AggregateTemplateContext)context; + } +
+ Total: @agg.Sum +
+ + + @{ + var aggregate = (AggregateTemplateContext)context; + } +
+ Grand Total: @aggregate.Sum +
+ + + + + + +@code +{ + private SfGrid Grid; + private List PickList { get; set; } + + protected override void OnInitialized() + { + PickList = ProductInfo.GetPickListData(); + } + + private async Task ToolbarClick(Syncfusion.Blazor.Navigations.ClickEventArgs args) + { + if (args.Item.Id == "Grid_excelexport") //Id is combination of Grid's ID and itemname. + { + await Grid.ExportToExcelAsync(); + } + } + + public void ExcelGroupCaptionInfoHandler(ExcelCaptionTemplateArgs args) + { + args.Cell.CellStyle.HAlign = Syncfusion.ExcelExport.HAlignType.Center; // to align the text to center. + args.Cell.CellStyle.Bold = true; // to set the text to Bold. + args.Cell.Value = args.Key; // to modify the text inside the group caption template. + } + + public void ExcelAggregateTemplateInfoHandler(ExcelAggregateEventArgs args) + { + if (args.AggregateType == AggregateTemplateType.Footer) + { + args.Cell.Value = string.Format("Grand Total: {0}", args.Value); + } + else if (args.AggregateType == AggregateTemplateType.GroupFooter) + { + args.Cell.Value = string.Format("Total: {0}", args.Value); + } + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="ProductInfo.cs" %} + +public class ProductInfo +{ + public ProductInfo(string productGroup, string style, string styleDescription, string size, string productColour, int stockQtyTransfer) + { + this.ProductGroup = productGroup; + this.Style = style; + this.Style_Description = styleDescription; + this.Size = size; + this.Product_Colour = productColour; + this.Stock_Qty_Transfer = stockQtyTransfer; + } + + public static List GetPickListData() + { + return new List + { + new ProductInfo("Shirts", "SH-001", "Classic Oxford Shirt", "M", "White", 25), + new ProductInfo("Shirts", "SH-001", "Classic Oxford Shirt", "L", "White", 30), + new ProductInfo("Shirts", "SH-001", "Classic Oxford Shirt", "XL", "Blue", 20), + new ProductInfo("Shirts", "SH-002", "Casual Linen Shirt", "S", "Beige", 15), + new ProductInfo("Shirts", "SH-002", "Casual Linen Shirt", "M", "Beige", 22), + new ProductInfo("Trousers", "TR-101", "Slim Fit Chinos", "30", "Navy", 28), + new ProductInfo("Trousers", "TR-101", "Slim Fit Chinos", "32", "Navy", 35), + new ProductInfo("Trousers", "TR-101", "Slim Fit Chinos", "34", "Khaki", 24), + new ProductInfo("Trousers", "TR-103", "Denim Jeans", "32", "Dark Blue", 40), + new ProductInfo("Jackets", "JK-201", "Leather Bomber Jacket", "M", "Brown", 10), + new ProductInfo("Jackets", "JK-203", "Denim Jacket", "S", "Light Blue", 11), + new ProductInfo("Accessories", "AC-301", "Leather Belt", "32", "Brown", 45), + new ProductInfo("Accessories", "AC-301", "Leather Belt", "34", "Brown", 50), + new ProductInfo("Accessories", "AC-301", "Leather Belt", "36", "Black", 38), + new ProductInfo("Accessories", "AC-302", "Cotton Scarf", "One Size", "Grey", 27), + new ProductInfo("Accessories", "AC-304", "Sunglasses", "One Size", "Tortoise", 36) + }; + } + + public string ProductGroup { get; set; } + public string Style { get; set; } + public string Style_Description { get; set; } + public string Size { get; set; } + public string Product_Colour { get; set; } + public int Stock_Qty_Transfer { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrdXKMYVbPmnvEo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Exporting with group caption template by customizing the alignment](./images/group-caption-alignment.gif) + ## Exporting with detail template The Syncfusion® Blazor DataGrid supports exporting both parent and child (detail) records including nested data to an Excel document.