Skip to content

Grids: Update column width API descriptions (#7969) #7980

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

Merged
merged 1 commit into from
Sep 10, 2025
+12 −6
Merged

Grids: Update column width API descriptions (#7969) #7980

Show file tree
Hide file tree
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
11 changes: 5 additions & 6 deletions api-reference/10 UI Components/GridBase/1 Configuration/columnAutoWidth.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,14 @@ default: false
---
---
##### shortDescription
Specifies whether columns should adjust their widths to the content.
Specifies if the component adjusts column widths to fit content.

---
When this property is set to **true**, all columns adjust their width to the content.
When this property is disabled, the component displays data in equal-width columns. {WidgetName} stretches columns to the component container and cuts off values that do not fit. The component displayes an ellipsis at the end of each cut off value.

If the {WidgetName} is wider than its overall content, the columns are stretched to occupy all available width. To avoid this, set the [columnWidth](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/columnWidth.md '{basewidgetpath}/Configuration/#columnWidth') or **columns**.[width](/api-reference/_hidden/GridBaseColumn/width.md '{basewidgetpath}/Configuration/columns/#width') property to *"auto"*.
When **columnAutoWidth** is enabled, the component adjusts the width of each column to avoid cutting off long values. If {WidgetName} content is wider than the component container, {WidgetName} enables horizontal [scrolling](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/scrolling/) to fit content.

If the content is wider, the **columnAutoWidth** property set to **true** causes horizontal scrolling. You can set the [allowHiding](/api-reference/_hidden/GridBaseColumn/allowHiding.md '{basewidgetpath}/Configuration/columns/#allowHiding') property to **false** for columns you want to be displayed continuously.

When the **columnAutoWidth** property is set to **false**, all columns have identical width, which in turn depends on the width of the UI component.
[note] When this property is enabled, virtual keyboards may experience issues with {WidgetName} input.

#include common-demobutton-named with {
url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/ColumnResizing/",
Expand All @@ -26,6 +24,7 @@ When the **columnAutoWidth** property is set to **false**, all columns have iden
}

#####See Also#####
- [columnWidth](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/#columnWidth)
- [width](/api-reference/10%20UI%20Components/DOMComponent/1%20Configuration/width.md '{basewidgetpath}/Configuration/#width')
- [columnFixing](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/columnFixing '{basewidgetpath}/Configuration/columnFixing/')
- [wordWrapEnabled](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/wordWrapEnabled.md '{basewidgetpath}/Configuration/#wordWrapEnabled')
7 changes: 7 additions & 0 deletions api-reference/10 UI Components/GridBase/1 Configuration/columnWidth.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,12 @@ default: undefined
Specifies the width for all [data columns](/concepts/05%20UI%20Components/DataGrid/15%20Columns/10%20Column%20Types/1%20Data%20Columns.md '/Documentation/Guide/UI_Components/{WidgetName}/Columns/Column_Types/Data_Columns/'). Has a lower priority than the **column**.[width](/api-reference/_hidden/GridBaseColumn/width.md '{basewidgetpath}/Configuration/columns/#width') property.

---
When this property is unspecified and the component container is wider than the content, {WidgetName} stretches columns to fit the container width. If the content is wider than the component container, {WidgetName} cuts off long values that do not fit. {WidgetName} displayes an ellipsis at the end of each cut off value.

When this property is *"auto"*, the component adjusts column widths to fit data. The component decreases its width if the content is narrower than the {WidgetName} container. If the content is wider than the component container, {WidgetName} enables horizontal [scrolling](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/scrolling/) to fit content.

[note] When **columnWidth** is set to *"auto"*, virtual keyboards may experience issues with {WidgetName} input.

#include common-demobutton-named with {
url: "https://js.devexpress.com/Demos/WidgetsGallery/Demo/DataGrid/ColumnResizing/",
name: "DataGrid"
Expand All @@ -18,4 +24,5 @@ Specifies the width for all [data columns](/concepts/05%20UI%20Components/DataGr
}

#####See Also#####
- [columnAutoWidth]({basewidgetpath}/Configuration/#columnAutoWidth)
- [columnMinWidth](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/columnMinWidth.md '{basewidgetpath}/Configuration/#columnMinWidth')
Loading