From 5b72eedd66f8b73074784906b63f9dc2f84f764e Mon Sep 17 00:00:00 2001
From: Dimo Dimov <961014+dimodi@users.noreply.github.com>
Date: Thu, 5 Jun 2025 13:45:49 +0300
Subject: [PATCH] Fix export column widths in new Financial sample app

---
 .../Components/Pages/Analytics.razor          | 27 ++--------
 .../Components/Pages/Overview.razor           | 27 ++--------
 .../Components/Pages/Transactions.razor       | 16 +-----
 .../Services/CommonUtils.cs                   | 49 +++++++++++++++++++
 4 files changed, 57 insertions(+), 62 deletions(-)
 create mode 100644 sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Services/CommonUtils.cs

diff --git a/sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Analytics.razor b/sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Analytics.razor
index 724c8b84..c5c96d19 100644
--- a/sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Analytics.razor
+++ b/sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Analytics.razor
@@ -107,6 +107,7 @@
             <GridColumn Field="@nameof(Transaction.PaymentMethodId)"
                         HeaderClass="centered-header"
                         TextAlign="@ColumnTextAlign.Center"
+                        Title="Payment Method"
                         Visible="@IsLargeScreen">
                 <Template>
                     @{ var dataItem = (Transaction)context; }
@@ -151,34 +152,12 @@
     }
     private void OnGridBeforeExcelExport(GridBeforeExcelExportEventArgs args)
     {
-        args.Columns.First(x => x.Field == nameof(Transaction.Date)).Width = "180px";
-        args.Columns.First(x => x.Field == nameof(Transaction.Amount)).Width = "100px";
-        if (IsLargeScreen)
-        {
-            args.Columns.First(x => x.Field == nameof(Transaction.Category)).Width = "120px";
-            args.Columns.First(x => x.Field == nameof(Transaction.PaymentMethodId)).Width = "100px";
-        }
-        if (IsMediumOrLargeScreen)
-        {
-            args.Columns.First(x => x.Field == nameof(Transaction.Merchant)).Width = "140px";
-        }
-        args.Columns.First(x => x.Field == nameof(Transaction.Status)).Width = "100px";
+        CommonUtils.SetExportableColumnWidths(args.Columns);
     }
 
     private void OnGridBeforePdfExport(GridBeforePdfExportEventArgs args)
     {
-        args.Columns.First(x => x.Field == nameof(Transaction.Date)).Width = "180px";
-        args.Columns.First(x => x.Field == nameof(Transaction.Amount)).Width = "100px";
-        if (IsLargeScreen)
-        {
-            args.Columns.First(x => x.Field == nameof(Transaction.Category)).Width = "120px";
-            args.Columns.First(x => x.Field == nameof(Transaction.PaymentMethodId)).Width = "100px";
-        }
-        if (IsMediumOrLargeScreen)
-        {
-            args.Columns.First(x => x.Field == nameof(Transaction.Merchant)).Width = "140px";
-        }
-        args.Columns.First(x => x.Field == nameof(Transaction.Status)).Width = "100px";
+        CommonUtils.SetExportableColumnWidths(args.Columns);
     }
 
     [JSInvokable("OnViewPortResize")]
diff --git a/sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Overview.razor b/sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Overview.razor
index 29bf6fac..2e46b30a 100644
--- a/sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Overview.razor
+++ b/sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Overview.razor
@@ -142,6 +142,7 @@
             <GridColumn Field="@nameof(Transaction.PaymentMethodId)"
                         HeaderClass="centered-header"
                         TextAlign="@ColumnTextAlign.Center"
+                        Title="Payment Method"
                         Visible="@IsLargeScreen">
                 <Template>
                     @{ var dataItem = (Transaction)context; }
@@ -196,34 +197,12 @@
 
     private void OnGridBeforeExcelExport(GridBeforeExcelExportEventArgs args)
     {
-        args.Columns.First(x => x.Field == nameof(Transaction.Date)).Width = "180px";
-        args.Columns.First(x => x.Field == nameof(Transaction.Amount)).Width = "100px";
-        if (IsLargeScreen)
-        {
-            args.Columns.First(x => x.Field == nameof(Transaction.Category)).Width = "120px";
-            args.Columns.First(x => x.Field == nameof(Transaction.PaymentMethodId)).Width = "100px";
-        }
-        if (IsMediumOrLargeScreen)
-        {
-            args.Columns.First(x => x.Field == nameof(Transaction.Merchant)).Width = "140px";
-        }
-        args.Columns.First(x => x.Field == nameof(Transaction.Status)).Width = "100px";
+        CommonUtils.SetExportableColumnWidths(args.Columns);
     }
 
     private void OnGridBeforePdfExport(GridBeforePdfExportEventArgs args)
     {
-        args.Columns.First(x => x.Field == nameof(Transaction.Date)).Width = "180px";
-        args.Columns.First(x => x.Field == nameof(Transaction.Amount)).Width = "100px";
-        if (IsLargeScreen)
-        {
-            args.Columns.First(x => x.Field == nameof(Transaction.Category)).Width = "120px";
-            args.Columns.First(x => x.Field == nameof(Transaction.PaymentMethodId)).Width = "100px";
-        }
-        if (IsMediumOrLargeScreen)
-        {
-            args.Columns.First(x => x.Field == nameof(Transaction.Merchant)).Width = "140px";
-        }
-        args.Columns.First(x => x.Field == nameof(Transaction.Status)).Width = "100px";
+        CommonUtils.SetExportableColumnWidths(args.Columns);
     }
 
     private double GetSavingsPercent(decimal value)
diff --git a/sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Transactions.razor b/sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Transactions.razor
index 196051f3..3e8cf165 100644
--- a/sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Transactions.razor
+++ b/sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Components/Pages/Transactions.razor
@@ -204,24 +204,12 @@
     }
     private void OnGridBeforeExcelExport(GridBeforeExcelExportEventArgs args)
     {
-        args.Columns.First(x => x.Field == nameof(Transaction.Date)).Width = "180px";
-        args.Columns.First(x => x.Field == nameof(Transaction.Amount)).Width = "100px";
-        if (IsMediumOrLargeScreen)
-        {
-            args.Columns.First(x => x.Field == nameof(Transaction.Merchant)).Width = "140px";
-        }
-        args.Columns.First(x => x.Field == nameof(Transaction.Status)).Width = "100px";
+        CommonUtils.SetExportableColumnWidths(args.Columns);
     }
 
     private void OnGridBeforePdfExport(GridBeforePdfExportEventArgs args)
     {
-        args.Columns.First(x => x.Field == nameof(Transaction.Date)).Width = "180px";
-        args.Columns.First(x => x.Field == nameof(Transaction.Amount)).Width = "100px";
-        if (IsMediumOrLargeScreen)
-        {
-            args.Columns.First(x => x.Field == nameof(Transaction.Merchant)).Width = "140px";
-        }
-        args.Columns.First(x => x.Field == nameof(Transaction.Status)).Width = "100px";
+        CommonUtils.SetExportableColumnWidths(args.Columns);
     }
 
     protected override async Task OnInitializedAsync()
diff --git a/sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Services/CommonUtils.cs b/sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Services/CommonUtils.cs
new file mode 100644
index 00000000..64a81d2e
--- /dev/null
+++ b/sample-applications/blazor-financial-dashboard/BlazorFinancialDashboard/Services/CommonUtils.cs
@@ -0,0 +1,49 @@
+using BlazorFinancialDashboard.Data;
+using Telerik.Blazor.Components.Grid;
+
+namespace BlazorFinancialDashboard.Services;
+
+public static class CommonUtils
+{
+    private static readonly Dictionary<string, string> ExportableColumnWiths = new()
+    {
+        { nameof(Transaction.Amount), "100px" },
+        { nameof(Transaction.Category), "120px" },
+        { nameof(Transaction.Date), "180px" },
+        { nameof(Transaction.Merchant), "140px" },
+        { nameof(Transaction.PaymentMethodId), "100px" },
+        { nameof(Transaction.Status), "100px" }
+    };
+
+    private static readonly string DefaultExportableColumnWidth = "120px";
+
+    public static void SetExportableColumnWidths(List<GridExcelExportColumn> currentColumns)
+    {
+        foreach (GridExcelExportColumn column in currentColumns)
+        {
+            if (ExportableColumnWiths.TryGetValue(column.Field, out string? value))
+            {
+                column.Width = value;
+            }
+            else
+            {
+                column.Width = DefaultExportableColumnWidth;
+            }
+        }
+    }
+
+    public static void SetExportableColumnWidths(List<GridPdfExportColumn> currentColumns)
+    {
+        foreach (GridPdfExportColumn column in currentColumns)
+        {
+            if (ExportableColumnWiths.TryGetValue(column.Field, out string? value))
+            {
+                column.Width = value;
+            }
+            else
+            {
+                column.Width = DefaultExportableColumnWidth;
+            }
+        }
+    }
+}