Skip to content
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.

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

Grids: describe sticky position feature #6686

Open
wants to merge 7 commits into
base: 24_2
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ id: GridBase.Options.columnFixing.icons.fix
---
---
##### shortDescription
<!-- Description goes here -->
Specifies an icon for the context menu item that fixes a column.

---
<!-- Description goes here -->
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ inheritsType: common/grids:ColumnFixingIcons
---
---
##### shortDescription
<!-- Description goes here -->
Contains properties that specify icons for column fixing commands in the context menu of a column header.

---
<!-- Description goes here -->
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ id: GridBase.Options.columnFixing.icons.leftPosition
---
---
##### shortDescription
<!-- Description goes here -->
Specifies an icon for the context menu subitem that fixes a column to the left edge of the UI component.

---
<!-- Description goes here -->
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ id: GridBase.Options.columnFixing.icons.rightPosition
---
---
##### shortDescription
<!-- Description goes here -->
Specifies an icon for the context menu subitem that fixes a column to the right edge of the UI component.

---
<!-- Description goes here -->
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ id: GridBase.Options.columnFixing.icons.stickyPosition
---
---
##### shortDescription
<!-- Description goes here -->
Specifies an icon for the context menu subitem that enables sticky column behavior.

---
<!-- Description goes here -->
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ id: GridBase.Options.columnFixing.icons.unfix
---
---
##### shortDescription
<!-- Description goes here -->
Specifies an icon for the context menu item that unfixes a column.

---
<!-- Description goes here -->

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,11 +1,9 @@
---
id: GridBase.Options.columnFixing.texts.stickyPosition
type: String
default: 'Stick in place'
---
---
##### shortDescription
<!-- Description goes here -->
Specifies text for the context menu subitem that enables sticky column behavior.

---
<!-- Description goes here -->
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ generateTypeLink:
---
---
##### shortDescription
<!-- Description goes here -->
Configures column fixing icons.

---
<!-- Description goes here -->
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ default: 'fix-column'
---
---
##### shortDescription
<!-- Description goes here -->
Specifies an icon for the context menu item that fixes a column.

---
<!-- Description goes here -->
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ default: 'fix-column-left'
---
---
##### shortDescription
<!-- Description goes here -->
Specifies an icon for the context menu subitem that fixes a column to the left edge of the UI component.

---
<!-- Description goes here -->
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ default: 'fix-column-right'
---
---
##### shortDescription
<!-- Description goes here -->
Specifies an icon for the context menu subitem that fixes a column to the right edge of the UI component.

---
<!-- Description goes here -->
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ default: 'stick-column'
---
---
##### shortDescription
<!-- Description goes here -->
Specifies an icon for the context menu subitem that enables sticky column behavior.

---
<!-- Description goes here -->
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ default: 'unfix-column'
---
---
##### shortDescription
<!-- Description goes here -->
Specifies an icon for the context menu item that unfixes a column.

---
<!-- Description goes here -->
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
---
uid: common/grids:ColumnFixingTexts.stickyPosition
type: String
default: 'Stick in place'
---
---
##### shortDescription
Specifies text for the context menu subitem that enables sticky column behavior.

---
<!-- Description goes here -->
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ references: GridBaseColumn.fixedPosition
---
---
##### shortDescription
<!-- Description goes here -->
Specifies a position type for fixed columns.

---
<!-- Description goes here -->
13 changes: 12 additions & 1 deletion api-reference/_hidden/GridBaseColumn/fixedPosition.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,19 @@ default: undefined
---
---
##### shortDescription
Specifies the UI component's edge to which the column is fixed. Applies only if **columns[]**.[fixed](/api-reference/_hidden/GridBaseColumn/fixed.md '{basewidgetpath}/Configuration/columns/#fixed') is **true**.
Specifies the column position. Applies only if **columns[]**.[fixed](/api-reference/_hidden/GridBaseColumn/fixed.md '{basewidgetpath}/Configuration/columns/#fixed') is **true**.

---
The following values are available:

- *'right'*
The column is fixed to the right edge of the grid.

- *'left'*
The column is fixed to the left edge of the grid.

- *'sticky'*
The column sticks to left and right edges when it reaches them.

#####See Also#####
- [columnFixing](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/columnFixing '{basewidgetpath}/Configuration/columnFixing/')
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
In some cases, the UI component contains so many columns that they cause horizontal scrolling. If specific columns should be on screen constantly regardless of how far the UI component is scrolled, a user can fix them.

![DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component DataGrid ColumnFixing](/images/DataGrid/visual_elements/column_fixing.png)
![DevExtreme DataGrid Column Fixing](/images/DataGrid/visual_elements/column_fixing.png)

To allow this, set the **columnFixing**.[enabled](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/columnFixing/enabled.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columnFixing/#enabled') property to **true**. If a user should never fix (or unfix) a specific column, set its [allowFixing](/api-reference/_hidden/GridBaseColumn/allowFixing.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#allowFixing') property to **false**.

Expand Down Expand Up @@ -95,7 +95,7 @@ To allow this, set the **columnFixing**.[enabled](/api-reference/10%20UI%20Compo

---

If a column should be fixed initially, assign **true** to its [fixed](/api-reference/_hidden/GridBaseColumn/fixed.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixed') property and specify its target position in the UI component using the [fixedPosition](/api-reference/_hidden/GridBaseColumn/fixedPosition.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixedPosition') property.
If a column should be fixed initially, assign **true** to its [fixed](/api-reference/_hidden/GridBaseColumn/fixed.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixed') property and specify its target position in the UI component with the [fixedPosition](/api-reference/_hidden/GridBaseColumn/fixedPosition.md '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/columns/#fixedPosition') property.

---
##### jQuery
Expand All @@ -105,7 +105,7 @@ If a column should be fixed initially, assign **true** to its [fixed](/api-refer
columns: [{
// ...
fixed: true,
fixedPosition: "left"
fixedPosition: "sticky"
}]
});
});
Expand All @@ -114,7 +114,7 @@ If a column should be fixed initially, assign **true** to its [fixed](/api-refer

<!--HTML-->
<dx-data-grid ... >
<dxi-column [fixed]="true" fixedPosition="left" ... ></dxi-column>
<dxi-column [fixed]="true" fixedPosition="sticky" ... ></dxi-column>
</dx-data-grid>

<!--TypeScript-->
Expand All @@ -136,7 +136,7 @@ If a column should be fixed initially, assign **true** to its [fixed](/api-refer
<!-- tab: App.vue -->
<template>
<DxDataGrid ... >
<DxColumn :fixed="true" fixed-position="left" ... />
<DxColumn :fixed="true" fixed-position="sticky" ... />
</DxDataGrid>
</template>

Expand Down Expand Up @@ -172,7 +172,7 @@ If a column should be fixed initially, assign **true** to its [fixed](/api-refer
render() {
return (
<DataGrid ... >
<Column fixed={true} fixedPosition="left" ... />
<Column fixed={true} fixedPosition="sticky" ... />
</DataGrid>
);
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
In some cases, the UI component contains so many columns that they cause horizontal scrolling. If specific columns should be on screen constantly regardless of how far the UI component is scrolled, a user can fix them.

![DevExtreme HTML5 JavaScript jQuery Angular Knockout UI component TreeList ColumnFixing](/images/treelist/visual_elements/column_fixing.png)
![DevExtreme TreeList Column Fixing](/images/treelist/visual_elements/column_fixing.png)

To allow this, set the **columnFixing**.[enabled](/api-reference/10%20UI%20Components/GridBase/1%20Configuration/columnFixing/enabled.md '/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columnFixing/#enabled') property to **true**. If a user should never fix (or unfix) a specific column, set its [allowFixing](/api-reference/_hidden/GridBaseColumn/allowFixing.md '/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#allowFixing') property to **false**.

Expand Down
Binary file modified images/DataGrid/visual_elements/column_fixing.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified images/treelist/visual_elements/column_fixing.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading