Grids: add Home/End shortcut info to demo descriptions (DevExpress#29924)

arman-boyakhchyan · web-flow · commit c14956b0298f · 2025-05-26T15:54:56.000+04:00
diff --git a/apps/demos/Demos/DataGrid/HorizontalVirtualScrolling/description.md b/apps/demos/Demos/DataGrid/HorizontalVirtualScrolling/description.md
@@ -1,2 +1,4 @@
-Horizontal virtual scrolling improves the rendering performance because the DataGrid only renders columns that are in&nbsp;the viewpoint. To&nbsp;enable this feature, set the **scrolling**.[columnRenderingMode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/scrolling/#columnRenderingMode) property to&nbsp;*"virtual"*.
-<!--split-->
+Horizontal virtual scrolling improves performance by rendering only displayed columns. To enable this feature, set **scrolling**.[columnRenderingMode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/scrolling/#columnRenderingMode) to *"virtual"*.
+<!--split-->
+
+You can scroll the component's data horizontally using **Shift + Scroll Wheel**. Utilize the **Home**/**End** keys to jump to the focused row's first/last cells, and **Ctrl + Home**/**Ctrl + End** to jump to the first cell of the first row/last cell of the last row.
diff --git a/apps/demos/Demos/DataGrid/InfiniteScrolling/description.md b/apps/demos/Demos/DataGrid/InfiniteScrolling/description.md
@@ -1,6 +1,8 @@
-If the DataGrid component is bound to a large dataset, you can enable infinite scroll mode to optimize data load times and improve user navigation. The component initially displays one page of rows. When users scroll to the end of the view, the DataGrid loads an additional page. Users can only load pages sequentially and cannot skip to arbitrary positions within the dataset.
+To optimize data load times and improve user navigation when binding DataGrid to a large dataset, you can enable infinite scrolling. In this demo, we bind the component to a dataset of 100,000 records.
 
-To enable infinite scroll mode, set the **scrolling**.[mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/scrolling/#mode) to *"infinite"*.
+To enable infinite scrolling, set **scrolling**.[mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/scrolling/#mode) to *"infinite"*.
+<!--split-->
 
-In this demo, the DataGrid is bound to a dataset of 100,000 records. Scroll to the last record to load the next page of records.
-<!--split-->
+The component initially displays one page of rows. When users scroll to the end of the view, DataGrid loads the next page. Users cannot skip to arbitrary positions within the component's dataset and can only load pages sequentially.
+
+As a result, the **Ctrl + End** shortcut jumps to the last loaded row and focuses on its last cell. **Ctrl + Home** jumps to the first row and focuses on its first cell.
diff --git a/apps/demos/Demos/DataGrid/KeyboardNavigation/description.md b/apps/demos/Demos/DataGrid/KeyboardNavigation/description.md
@@ -1,3 +1,6 @@
+To see all available keyboard shortcuts, refer to the DataGrid accessibility documentation: [Keyboard Navigation](/Documentation/Guide/UI_Components/DataGrid/Accessibility/#Keyboard_Navigation).
+<!--split-->
+
 In this demo, you can use the following keys and key combinations to interact with the DataGrid:
 
 - **Enter**             
@@ -7,5 +10,4 @@ Execute an action on a focused element.
 Navigate within DataGrid elements.
 
 - **Ctrl** + **&uarr;** or **Ctrl** + **&darr;**            
-Navigate between a column header, filter row, data area, filter panel, and pager.
-<!--split-->
+Navigate between a column header, filter row, data area, filter panel, and pager.
diff --git a/apps/demos/Demos/DataGrid/RecordPaging/description.md b/apps/demos/Demos/DataGrid/RecordPaging/description.md
@@ -15,3 +15,5 @@ Displays the current page number and total record count. To display page informa
 The pager supports full, compact, and adaptive (default) display modes. In compact mode, the pager changes the appearance of the page navigator and page selector to use screen space more efficiently. In adaptive mode, the pager automatically chooses between the full and compact modes based on the DataGrid's width. Use the [displayMode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#displayMode) property to switch between modes.
 
 In this demo, you can use the drop-down Display Mode menu to switch between full and compact display modes. You can also use the checkboxes to hide or display different pager elements. Note that when the pager is in compact mode, navigation buttons are always visible.
+
+You can navigate between pages using the on-screen pager controls. Jump to the first/last row of each page by focusing on the data area and using **Ctrl+Home** or **Ctrl+End**. These shortcuts focus the first cell of the first row/last cell of the last row.
diff --git a/apps/demos/Demos/DataGrid/VirtualScrolling/description.md b/apps/demos/Demos/DataGrid/VirtualScrolling/description.md
@@ -1,6 +1,6 @@
-If the DataGrid component is bound to a large dataset, you can enable the virtual scroll feature to optimize data load times and improve user navigation. The component calculates the overall number of visible rows and displays a scrollbar that allows users to navigate to any section of rows. When users release the scroll thumb, the control loads records to be displayed in the viewport and removes other rows from memory. 
+To optimize data load times and improve user navigation when binding DataGrid to a large dataset, you can enable virtual scrolling. In this demo, we bind the component to a dataset of 100,000 records. 
 
-To allow users to scroll the DataGrid virtually, set the **scrolling**.[mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/scrolling/#mode) to *"virtual"*.
+To enable virtual scrolling, set **scrolling**.[mode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/scrolling/#mode) to *"virtual"*.
 <!--split-->
 
-In this demo, the DataGrid is bound to a local dataset of 100,000 records. You can drag the scrollbar on the right to see that records within the viewport are updated immediately.
+Unlike [infinite scrolling](/Demos/WidgetsGallery/Demo/DataGrid/InfiniteScrolling/MaterialBlueLight/), virtual scrolling allows users to navigate to any section of rows immediately. DataGrid only loads displayed rows into memory and unloads rows as they are hidden by user scrolling. When virtual scrolling is enabled, **Ctrl+Home** and **Ctrl+End** focus the first cell in the first row/last cell in the last row of the component data set.
diff --git a/apps/demos/Demos/TreeList/FixedAndStickyColumns/description.md b/apps/demos/Demos/TreeList/FixedAndStickyColumns/description.md
@@ -1,4 +1,5 @@
 A horizontal scrollbar appears when the total width of all grid columns exceeds the DevExtreme TreeList's overall width. To maintain column visibility when scrolling horizontally, set the **columnFixing**.[enabled](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columnFixing/#enabled) property to `true`.
+<!--split-->
 
 To fix a column programmatically, set its [fixed](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#fixed) property to `true` and specify the desired [fixedPosition](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#fixedPosition):
 
@@ -11,5 +12,6 @@ The column is fixed to the rightmost edge of the grid.
 - *'sticky'*    
 The column "sticks" to the left or rightmost edge when it reaches either side of the grid.
 
-To fix (or unfix) a column, right-click a column header and select the desired operation using the DataGrid’s built-in context menu. To prevent users from fixing/unfixing a column, set its [allowFixing](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#allowFixing) property to `false`.
-<!--split-->
+To fix (or unfix) a column, right-click a column header and select the desired operation using the component's built-in context menu. To prevent users from fixing/unfixing columns, disable [columns[]](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/).[allowFixing](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/columns/#allowFixing).
+
+You can scroll the component's data horizontally with **Shift + Scroll Wheel**. Jump to the first/last cell of the focused row using **Home**/**End**. Focus the first cell of the first row/last cell of the last row with **Ctrl + Home**/**Ctrl + End**.
diff --git a/apps/demos/Demos/TreeList/KeyboardNavigation/description.md b/apps/demos/Demos/TreeList/KeyboardNavigation/description.md
@@ -1,3 +1,6 @@
+To see all available keyboard shortcuts, refer to the TreeList accessibility documentation: [Keyboard Navigation](/Documentation/Guide/UI_Components/TreeList/Accessibility/#Keyboard_Navigation).
+<!--split-->
+
 In this demo, you can use the following keys and key combinations to interact with the TreeList:
 
 - **Enter**             
@@ -10,5 +13,4 @@ Navigate within TreeList elements.
 Navigate between a column header, filter row, data area, filter panel, and pager.
 
 - **Ctrl** + **&larr;** or **Ctrl** + **&rarr;**             
-Expand/collapse the focused row.
-<!--split-->
+Expand/collapse the focused row.
diff --git a/apps/demos/Demos/TreeList/Paging/description.md b/apps/demos/Demos/TreeList/Paging/description.md
@@ -13,3 +13,5 @@ Changes the page size. To display this element, enable the [showPageSizeSelector
 Displays the current page number and total record count. To display page information, enable the [showInfo](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/pager/#showInfo) property. You can also use the [infoText](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/pager/#infoText) property to customize the information text string.
 
 The pager supports full, compact, and adaptive (default) display modes. In compact mode, the pager changes the appearance of the page navigator and page selector to use screen space more efficiently. In adaptive mode, the pager automatically chooses between the full and compact modes based on the TreeList's width. Use the [displayMode](/Documentation/ApiReference/UI_Components/dxTreeList/Configuration/pager/#displayMode) property to switch between modes.
+
+You can navigate between pages using the on-screen pager controls. Jump to the first/last row of each page by focusing on the data area and using **Ctrl+Home** or **Ctrl+End**. These shortcuts focus the first cell of the first row/last cell of the last row.
