Skip to content

1018310: Commited new sample in columns autofit section #8150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sanjaykumar-suresh wants to merge 1 commit into
base: development
Choose a base branch
from
Open

1018310: Commited new sample in columns autofit section #8150

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
89 changes: 87 additions & 2 deletions blazor/datagrid/columns.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1039,8 +1039,9 @@ The Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor DataGrid provides mu

1. AutoFit on double-click
2. AutoFit via Programmatically
3. AutoFit with Empty Space
4. AutoFit on Column Visibility Change
3. AutoFit via GridColumn
4. AutoFit with Empty Space
5. AutoFit on Column Visibility Change

### AutoFit on double-click

Expand Down Expand Up @@ -1305,6 +1306,90 @@ 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 <sup style="font-size:70%">&reg;</sup> 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.

In this configuration, `AutoFit` is enabled for the **CustomerID** and **ShipCity** columns.

{% tabs %}
{% highlight razor tabtitle="Index.razor" %}
@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@OrderData" GridLines="GridLine.Both" Height="315" Width="800">
<GridColumns>
<GridColumn Field=@nameof(OrderDetails.OrderID) HeaderText="Order ID" MinWidth="100" MaxWidth="200" TextAlign="TextAlign.Right" Width="200"></GridColumn>
<GridColumn Field=@nameof(OrderDetails.CustomerID) HeaderText="Customer ID" AutoFit="true" MinWidth="8" Width="150"></GridColumn>
<GridColumn Field=@nameof(OrderDetails.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" MinWidth="10" Width="150"></GridColumn>
<GridColumn Field=@nameof(OrderDetails.ShipCity) HeaderText="Ship City" AutoFit="true" MinWidth="8" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderDetails.ShipCountry) HeaderText="Ship Country" MinWidth="8" Width="150"></GridColumn>
</GridColumns>
</SfGrid>

@code
{
public List<OrderDetails> OrderData { get; set; }

protected override void OnInitialized()
{
OrderData = OrderDetails.GetAllRecords();
}
}
{% endhighlight %}
{% highlight c# tabtitle="OrderDetails.cs" %}
public class OrderDetails
{
public static List<OrderDetails> order = new List<OrderDetails>();
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<OrderDetails> 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 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 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 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"));
}

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/hDrHXTMjBPsFPplW?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.
Expand Down