diff --git a/CS/DxGrid.AutoFit/Components/Pages/Index.razor b/CS/DxGrid.AutoFit/Components/Pages/Index.razor index 6387c62..8521bd0 100644 --- a/CS/DxGrid.AutoFit/Components/Pages/Index.razor +++ b/CS/DxGrid.AutoFit/Components/Pages/Index.razor @@ -21,23 +21,19 @@ @code { IGrid Grid { get; set; } - private List people { get; set; } + List FixedWidthColumnCaptions = new List { "ID", "First Name", + "Last Name", "Honorific", "Occupation" }; - protected override void OnAfterRender(bool firstRender) - { - if (firstRender) - { + protected override void OnAfterRender(bool firstRender) { + if (firstRender) { Grid.BeginUpdate(); - foreach (var column in Grid.GetColumns()) - { - if (column.Caption == "Email" || column.Caption == "Address" || column.Caption == "Description") - { - column.Width = "0px"; - } - else - { + foreach (var column in Grid.GetColumns()) { + if (FixedWidthColumnCaptions.Contains(column.Caption)) { column.MinWidth = 100; + } + else { + column.Width = "0px"; } } Grid.EndUpdate(); @@ -46,8 +42,7 @@ } } - protected override void OnInitialized() - { + protected override void OnInitialized() { people = PersonDataService.GetPeople(); } } \ No newline at end of file diff --git a/README.md b/README.md index 75c2f2c..fe36371 100644 --- a/README.md +++ b/README.md @@ -1,117 +1,45 @@ -![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/1109763278/25.1.7%2B) [![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183) [![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives) -# DxGrid - How to implement the AutoFit feature for grids with different column widths +# Blazor Grid – How to Fit Columns to Content and Available Space -This example illustrates how to use the [AutoFitColumnWidths()](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.AutoFitColumnWidths) for grids that have columns with varying widths such that no columns will be truncated. -image -image +This example implements a [DevExpress Blazor Grid](https://docs.devexpress.devx/Blazor/403143/components/grid) column layout that adapts to different desktop screen sizes as follows: + +* Columns occupy available space +* Cell content is always visible (word trimming/wrapping is disabled) + +![Blazor Grid – How to Auto-Fit Columns to Content and Available Space](images/auto-fit-grid-columns.png) ## Implementation Details -1. Add DxGrid and bind it to data that contains properties of predictable length (e.g. ID, First Name, Honorific) and unpredictable length (e.g. Email, Address): - ```razor - - - - - - - - - - - - - -@code { - IGrid Grid { get; set; } - private List people { get; set; } - - protected override void OnInitialized() - { - people = PersonDataService.GetPeople(); - } -} - ``` - ```csharp -public class Person -{ - public int Id { get; set; } - public string FirstName { get; set; } - public string LastName { get; set; } - public string Honorific { get; set; } - public string Email { get; set; } - public string Address { get; set; } - public string Occupation { get; set; } - public string Description { get; set; } -} -``` -```csharp -public class PersonDataService : IPersonDataService -{ - public List GetPeople() - { - return new List() { - new Person { Id = 1, FirstName = "Alice", LastName = "Johnson", Honorific = "Ms.", Email = "alice.johnson@example.com", Address = "123 Maple Street, Springfield", Occupation = "Engineer", Description = "Enjoys solving complex problems and creating elegant solutions." }, - new Person { Id = 2, FirstName = "Bob", LastName = "Smith", Honorific = "Mr.", Email = "bob.smith@example.com", Address = "456 Oak Avenue, Rivertown", Occupation = "Teacher", Description = "Passionate about education and lifelong learning." }, - new Person { Id = 3, FirstName = "Catherine", LastName = "Lee", Honorific = "Dr.", Email = "catherine.lee@example.com", Address = "789 Pine Road, Lakeside", Occupation = "Physician", Description = "Dedicated to patient care and medical research." }, - new Person { Id = 4, FirstName = "David", LastName = "Martinez", Honorific = "Mr.", Email = "david.martinez@example.com", Address = "321 Birch Lane, Hillcrest", Occupation = "Architect", Description = "Designs sustainable and innovative buildings." }, - new Person { Id = 5, FirstName = "Ella", LastName = "Brown", Honorific = "Mrs.", Email = "ella.brown@example.com", Address = "654 Cedar Court, Brookfield", Occupation = "Marketing", Description = "Creative thinker with a knack for brand strategy." }, - new Person { Id = 6, FirstName = "Frank", LastName = "Wilson", Honorific = "Mr.", Email = "frank.wilson@example.com", Address = "987 Walnut Drive, Greenfield", Occupation = "Chef", Description = "Loves experimenting with flavors and cuisines." }, - new Person { Id = 7, FirstName = "Grace", LastName = "Taylor", Honorific = "Ms.", Email = "grace.taylor@example.com", Address = "159 Elm Street, Fairview", Occupation = "Designer", Description = "Passionate about visual storytelling and design." }, - new Person { Id = 8, FirstName = "Henry", LastName = "Clark", Honorific = "Mr.", Email = "henry.clark@example.com", Address = "753 Willow Way, Meadowbrook", Occupation = "Lawyer", Description = "Focused on justice and advocacy for clients." }, - new Person { Id = 9, FirstName = "Isabella", LastName = "Davis", Honorific = "Ms.", Email = "isabella.davis@example.com", Address = "852 Cherry Boulevard, Sunnyside", Occupation = "Journalist", Description = "Enjoys uncovering stories and sharing truth." }, - new Person { Id = 10, FirstName = "Jack", LastName = "Miller", Honorific = "Mr.", Email = "jack.miller@example.com", Address = "951 Poplar Street, Crestwood", Occupation = "Entrepreneur", Description = "Driven by innovation and building new ventures." } - }; - } -} -``` -2. In OnAfterRender, call [Grid.BeginUpdate()](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.BeginUpdate) and loop through each column using [Grid.GetColumns()](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.GetColumns): -```csharp -protected override void OnAfterRender(bool firstRender) -{ - if (firstRender) - { - Grid.BeginUpdate(); - foreach (var column in Grid.GetColumns()) -``` -3. For columns that have unpredictable length, set the column [Width](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridColumn.Width) to `0px`. For columns that have a predictable length, set the column [MinWidth](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGridColumn.MinWidth) to a value that will not truncate the text in the columns (in this case, `100px`): -```csharp -Grid.BeginUpdate(); -foreach (var column in Grid.GetColumns()) -{ - if (column.Caption == "Email" || column.Caption == "Address" || column.Caption == "Description") - { - column.Width = "0px"; - } - else - { - column.MinWidth = 100; - } -} -``` -4. After updating the Width or MinWidth of each column, call [Grid.EndUpdate()](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.EndUpdate) and [Grid.AutoFitColumnWidths()](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxGrid.AutoFitColumnWidths): + +1. Bind our Blazor Grid to a data source and populate the component with columns. + +2. Use the [Grid.TextWrapEnabled](https://docs.devexpress.devx/Blazor/DevExpress.Blazor.DxGrid.TextWrapEnabled) property to disable word wrapping. + +3. Identify columns with fixed content width (for instance, ID, Date, Name). For "fixed content width" columns, assign maximum content length to [MinWidth](https://docs.devexpress.devx/Blazor/DevExpress.Blazor.DxGridColumn.MinWidth) ([Width](https://docs.devexpress.devx/Blazor/DevExpress.Blazor.DxGridColumn.Width) property must not be set). This configuration ensures that a column does not shrink below a specified limit but can stretch on wide screens. + +4. For remaining columns, set [Width](https://docs.devexpress.devx/Blazor/DevExpress.Blazor.DxGridColumn.Width) to `0px`. + +5. Call the [AutoFitColumnWidths](https://docs.devexpress.devx/Blazor/DevExpress.Blazor.DxGrid.AutoFitColumnWidths) method to adjust zero-width columns to content and stretch fixed-width columns. + ```csharp -protected override void OnAfterRender(bool firstRender) -{ - if (firstRender) - { +IGrid Grid { get; set; } +List FixedWidthColumnCaptions = new List { "ID", "First Name", + "Last Name", "Honorific", "Occupation" }; + +protected override void OnAfterRender(bool firstRender) { + if (firstRender) { Grid.BeginUpdate(); - foreach (var column in Grid.GetColumns()) - { - if (column.Caption == "Email" || column.Caption == "Address" || column.Caption == "Description") - { - column.Width = "0px"; - } - else - { + foreach (var column in Grid.GetColumns()) { + if (FixedWidthColumnCaptions.Contains(column.Caption)) { column.MinWidth = 100; + } + else { + column.Width = "0px"; } } Grid.EndUpdate(); - Grid.AutoFitColumnWidths(); } } @@ -123,6 +51,14 @@ protected override void OnAfterRender(bool firstRender) - [Person.cs](https://github.com/DevExpress-Examples/draft-DxGrid-AutoFit-Example/blob/25.1.7%2B/CS/DxGrid.AutoFit/Models/Person.cs) - [PersonDataService.cs](https://github.com/DevExpress-Examples/draft-DxGrid-AutoFit-Example/blob/25.1.7%2B/CS/DxGrid.AutoFit/Services/PersonDataService.cs) +## Documentation + +- [Blazor Grid – Columns](https://docs.devexpress.devx/Blazor/404479/components/grid/columns/columns) + +## More Examples + +- [Blazor Grid – Responsive Layout Demo](https://demos.devexpress.com/blazor/LayoutBreakpoint#ResponsiveLayout) + ## Does this example address your development requirements/objectives? diff --git a/images/auto-fit-grid-columns.png b/images/auto-fit-grid-columns.png new file mode 100644 index 0000000..c2361ad Binary files /dev/null and b/images/auto-fit-grid-columns.png differ