From f3fc7758f712b30175e3b53f9c03a178d7dca869 Mon Sep 17 00:00:00 2001 From: SanjayKumarSuresh Date: Fri, 3 Apr 2026 17:58:47 +0530 Subject: [PATCH 1/5] 1018310: Commited new sample --- blazor/datagrid/columns.md | 82 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 82 insertions(+) diff --git a/blazor/datagrid/columns.md b/blazor/datagrid/columns.md index 7017ca39ab..865cb88805 100644 --- a/blazor/datagrid/columns.md +++ b/blazor/datagrid/columns.md @@ -1039,6 +1039,7 @@ The Syncfusion® Blazor DataGrid provides mu 1. AutoFit on double-click 2. AutoFit via Programmatically +3. AutoFit via GridColumn 3. AutoFit with Empty Space 4. AutoFit on Column Visibility Change @@ -1305,6 +1306,87 @@ The [AutoFitColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo {% previewsample "https://blazorplayground.syncfusion.com/embed/rZrqWtUWCHFCmyCS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +### AutoFit via GridColumn + +The Syncfusion ® Blazor DataGrid supports autofitting specific columns during initial rendering by enabling the `AutoFit` property on the corresponding `GridColumn` component. When `AutoFit` is enabled at the column level, the column width is automatically calculated based on the content it contains. This allows the column to dynamically expand or contract, ensuring that cell values are fully visible without truncation. In this configuration, the content‑driven width takes precedence over any predefined width settings, improving the display of columns with variable or unpredictable content. + + +{% tabs %} +{% highlight razor tabtitle="Index.razor" %} +@using Syncfusion.Blazor.Grids + + + + + + + + + + + +@code +{ + public List OrderData { get; set; } + + protected override void OnInitialized() + { + OrderData = OrderDetails.GetAllRecords(); + } +} +{% endhighlight %} +{% highlight c# tabtitle="OrderDetails.cs" %} +public class OrderDetails +{ + public static List order = new List(); + public OrderDetails() { } + public OrderDetails(int OrderID, string CustomerId, double Freight, DateTime OrderDate, string ShipCity, string ShipCountry) + { + this.OrderID = OrderID; + this.CustomerID = CustomerId; + this.Freight = Freight; + this.OrderDate = OrderDate; + this.ShipCity = ShipCity; + this.ShipCountry = ShipCountry; + } + + public static List GetAllRecords() + { + if (order.Count == 0) + { + order.Add(new OrderDetails(10248, "Vine Traders", 32.38, new DateTime(1996, 7, 4), "Reims City", "Australia")); + order.Add(new OrderDetails(10249, "Tom Supply", 11.61, new DateTime(1996, 7, 5), "Munster Town", "Australia")); + order.Add(new OrderDetails(10250, "Hana Foods", 65.83, new DateTime(1996, 7, 8), "Rio Janeiro City", "United States")); + order.Add(new OrderDetails(10251, "Victor Exports", 41.34, new DateTime(1996, 7, 8), "Lyon Urban Area", "Australia")); + order.Add(new OrderDetails(10252, "Super Retail", 51.3, new DateTime(1996, 7, 9), "Charleroi Industrial Zone", "United States")); + order.Add(new OrderDetails(10253, "Hana Market", 58.17, new DateTime(1996, 7, 10), "Rio Janeiro Metro", "United States")); + order.Add(new OrderDetails(10254, "Chop House", 22.98, new DateTime(1996, 7, 11), "Bern Capital City", "Switzerland")); + order.Add(new OrderDetails(10255, "Rich Supplies", 148.33, new DateTime(1996, 7, 12), "Geneva Lake Region", "Switzerland")); + order.Add(new OrderDetails(10256, "Well Imports", 13.97, new DateTime(1996, 7, 15), "Resende City Area", "Brazil")); + order.Add(new OrderDetails(10257, "Hill Foods", 81.91, new DateTime(1996, 7, 16), "San Cristobal City", "Venezuela")); + order.Add(new OrderDetails(10258, "Ernst Handel", 140.51, new DateTime(1996, 7, 17), "Graz City Center", "Austria")); + order.Add(new OrderDetails(10259, "Central Trade", 3.25, new DateTime(1996, 7, 18), "Mexico City Zone", "Mexico")); + order.Add(new OrderDetails(10260, "Ottik Sales", 55.09, new DateTime(1996, 7, 19), "Cologne Rhine Area", "Germany")); + order.Add(new OrderDetails(10261, "Queen Depot", 3.05, new DateTime(1996, 7, 19), "Rio Janeiro Port", "Brazil")); + order.Add(new OrderDetails(10262, "Rapid Transport", 48.29, new DateTime(1996, 7, 22), "Albuquerque Metro Area", "USA")); + } + + return order; + } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public double Freight { get; set; } + public DateTime OrderDate { get; set; } + public string ShipCity { get; set; } + public string ShipCountry { get; set; } +} +{% endhighlight %} +{% endtabs %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhHXzDUqFNelcyC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + ### AutoFit with Empty Space The AutoFit feature maintains the defined column widths without stretching columns to fill unused space in the grid. When the total width of all columns is less than the grid width, empty space remains visible instead of columns auto-adjusting. From c1bb68d9201f84dded970dad8ceb71ca231467d9 Mon Sep 17 00:00:00 2001 From: sanjaykumar-suresh <93911504+sanjaykumar-suresh@users.noreply.github.com> Date: Wed, 8 Apr 2026 19:42:31 +0530 Subject: [PATCH 2/5] 1018310: Changed made as Suggested. --- blazor/datagrid/columns.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/blazor/datagrid/columns.md b/blazor/datagrid/columns.md index 865cb88805..3ae561cff3 100644 --- a/blazor/datagrid/columns.md +++ b/blazor/datagrid/columns.md @@ -1308,19 +1308,21 @@ The [AutoFitColumnsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo ### AutoFit via GridColumn -The Syncfusion ® Blazor DataGrid supports autofitting specific columns during initial rendering by enabling the `AutoFit` property on the corresponding `GridColumn` component. When `AutoFit` is enabled at the column level, the column width is automatically calculated based on the content it contains. This allows the column to dynamically expand or contract, ensuring that cell values are fully visible without truncation. In this configuration, the content‑driven width takes precedence over any predefined width settings, improving the display of columns with variable or unpredictable content. +The Syncfusion ® Blazor DataGrid supports autoFit the specific columns during initial rendering by enabling the [AutoFit](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html#Syncfusion_Blazor_Grids_GridColumn_AutoFit) property on the corresponding [GridColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridColumn.html) definition. When `AutoFit` is enabled at the column level, the column width is calculated dynamically based on the content it contains. + +This behavior allows the column to expand or shrink automatically so that cell values are fully visible without being truncated. When `AutoFit` is applied, the content‑driven width takes precedence over any predefined width values, ensuring optimal display for columns that contain variable or unpredictable data. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + - + @@ -1357,15 +1359,15 @@ public class OrderDetails order.Add(new OrderDetails(10248, "Vine Traders", 32.38, new DateTime(1996, 7, 4), "Reims City", "Australia")); order.Add(new OrderDetails(10249, "Tom Supply", 11.61, new DateTime(1996, 7, 5), "Munster Town", "Australia")); order.Add(new OrderDetails(10250, "Hana Foods", 65.83, new DateTime(1996, 7, 8), "Rio Janeiro City", "United States")); - order.Add(new OrderDetails(10251, "Victor Exports", 41.34, new DateTime(1996, 7, 8), "Lyon Urban Area", "Australia")); + order.Add(new OrderDetails(10251, "Victor Exports Limited", 41.34, new DateTime(1996, 7, 8), "Lyon Urban Area", "Australia")); order.Add(new OrderDetails(10252, "Super Retail", 51.3, new DateTime(1996, 7, 9), "Charleroi Industrial Zone", "United States")); order.Add(new OrderDetails(10253, "Hana Market", 58.17, new DateTime(1996, 7, 10), "Rio Janeiro Metro", "United States")); order.Add(new OrderDetails(10254, "Chop House", 22.98, new DateTime(1996, 7, 11), "Bern Capital City", "Switzerland")); - order.Add(new OrderDetails(10255, "Rich Supplies", 148.33, new DateTime(1996, 7, 12), "Geneva Lake Region", "Switzerland")); + order.Add(new OrderDetails(10255, "Rich Supplies Limited", 148.33, new DateTime(1996, 7, 12), "Geneva Lake Region", "Switzerland")); order.Add(new OrderDetails(10256, "Well Imports", 13.97, new DateTime(1996, 7, 15), "Resende City Area", "Brazil")); order.Add(new OrderDetails(10257, "Hill Foods", 81.91, new DateTime(1996, 7, 16), "San Cristobal City", "Venezuela")); order.Add(new OrderDetails(10258, "Ernst Handel", 140.51, new DateTime(1996, 7, 17), "Graz City Center", "Austria")); - order.Add(new OrderDetails(10259, "Central Trade", 3.25, new DateTime(1996, 7, 18), "Mexico City Zone", "Mexico")); + order.Add(new OrderDetails(10259, "Central Trade center", 3.25, new DateTime(1996, 7, 18), "Mexico City Zone", "Mexico")); order.Add(new OrderDetails(10260, "Ottik Sales", 55.09, new DateTime(1996, 7, 19), "Cologne Rhine Area", "Germany")); order.Add(new OrderDetails(10261, "Queen Depot", 3.05, new DateTime(1996, 7, 19), "Rio Janeiro Port", "Brazil")); order.Add(new OrderDetails(10262, "Rapid Transport", 48.29, new DateTime(1996, 7, 22), "Albuquerque Metro Area", "USA")); @@ -1384,7 +1386,7 @@ public class OrderDetails {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhHXzDUqFNelcyC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVdXTDFeCXxYymp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### AutoFit with Empty Space @@ -2362,4 +2364,4 @@ Use `HideAtMedia` property to create responsive layouts where certain columns ar * Comprehensive information about the Syncfusion Blazor DataGrid and its features is available through the following resources: * **Feature Overview:** The [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour provides a complete overview of available capabilities. - * **Interactive Examples:** The [Blazor DataGrid examples](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) provide practical demonstrations of data presentation and manipulation. \ No newline at end of file + * **Interactive Examples:** The [Blazor DataGrid examples](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) provide practical demonstrations of data presentation and manipulation. From f5b9a5b1013deb3dbb896e1cb758ffbdf9aa9f32 Mon Sep 17 00:00:00 2001 From: sanjaykumar-suresh <93911504+sanjaykumar-suresh@users.noreply.github.com> Date: Fri, 10 Apr 2026 13:27:42 +0530 Subject: [PATCH 3/5] 1018310: Changed made as Suggested. --- blazor/datagrid/columns.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/blazor/datagrid/columns.md b/blazor/datagrid/columns.md index 3ae561cff3..883945b881 100644 --- a/blazor/datagrid/columns.md +++ b/blazor/datagrid/columns.md @@ -1312,12 +1312,13 @@ The Syncfusion ® Blazor DataGrid supports a This behavior allows the column to expand or shrink automatically so that cell values are fully visible without being truncated. When `AutoFit` is applied, the content‑driven width takes precedence over any predefined width values, ensuring optimal display for columns that contain variable or unpredictable data. +In this configuration, `AutoFit` is enabled for the CustomerID and ShipCity columns. {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + @@ -1386,7 +1387,7 @@ public class OrderDetails {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVdXTDFeCXxYymp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrHXTMjBPsFPplW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### AutoFit with Empty Space From deeb159cc33c569f0f025046a70057aaafa13781 Mon Sep 17 00:00:00 2001 From: sanjaykumar-suresh <93911504+sanjaykumar-suresh@users.noreply.github.com> Date: Fri, 10 Apr 2026 13:38:32 +0530 Subject: [PATCH 4/5] 1018310: Changes made --- blazor/datagrid/columns.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/datagrid/columns.md b/blazor/datagrid/columns.md index 883945b881..514b237e21 100644 --- a/blazor/datagrid/columns.md +++ b/blazor/datagrid/columns.md @@ -1312,7 +1312,7 @@ The Syncfusion ® Blazor DataGrid supports a This behavior allows the column to expand or shrink automatically so that cell values are fully visible without being truncated. When `AutoFit` is applied, the content‑driven width takes precedence over any predefined width values, ensuring optimal display for columns that contain variable or unpredictable data. -In this configuration, `AutoFit` is enabled for the CustomerID and ShipCity columns. +In this configuration, `AutoFit` is enabled for the **CustomerID** and **ShipCity** columns. {% tabs %} {% highlight razor tabtitle="Index.razor" %} From 401c02b3cbd5740e4166dab2590a6420a980406d Mon Sep 17 00:00:00 2001 From: sanjaykumar-suresh <93911504+sanjaykumar-suresh@users.noreply.github.com> Date: Fri, 10 Apr 2026 14:23:30 +0530 Subject: [PATCH 5/5] 1018310: Numbering Changes made --- blazor/datagrid/columns.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/datagrid/columns.md b/blazor/datagrid/columns.md index 514b237e21..00f370a2da 100644 --- a/blazor/datagrid/columns.md +++ b/blazor/datagrid/columns.md @@ -1040,8 +1040,8 @@ The Syncfusion® Blazor DataGrid provides mu 1. AutoFit on double-click 2. AutoFit via Programmatically 3. AutoFit via GridColumn -3. AutoFit with Empty Space -4. AutoFit on Column Visibility Change +4. AutoFit with Empty Space +5. AutoFit on Column Visibility Change ### AutoFit on double-click