From 0feb95953970e31324b92ae103d00f72fad4bc64 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Mon, 16 Mar 2026 13:22:12 +0400 Subject: [PATCH 1/6] DataGrid: Add External Pager Info to Paging Demo Desc. --- apps/demos/Demos/DataGrid/RecordPaging/description.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/apps/demos/Demos/DataGrid/RecordPaging/description.md b/apps/demos/Demos/DataGrid/RecordPaging/description.md index 41f25fc39ee0..33abeaa699b4 100644 --- a/apps/demos/Demos/DataGrid/RecordPaging/description.md +++ b/apps/demos/Demos/DataGrid/RecordPaging/description.md @@ -1,7 +1,7 @@ -The DataGrid splits records into multiple pages. This technique helps optimize control performance: the client only needs to load and render one page at a time. Users can use a scroll bar or a pager to navigate between pages. This demo shows how to enable and customize the pager. +The DataGrid splits records into multiple pages. This technique helps optimize control performance: the client only needs to load and render one page at a time. Users can use a scroll bar or a pager to navigate between pages. This demo shows how to enable and customize the built-in pager. -The pager is configured in the [pager](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/) object and contains the following elements: +The built-in pager is configured in the [pager](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/) object and contains the following elements: - **Page navigator** Enables page navigation. @@ -12,8 +12,10 @@ Changes the page size. To display this element, enable the [showPageSizeSelector - **Page information** Displays the current page number and total record count. To display page information, enable the [showInfo](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#showInfo) property. You can also use the [infoText](/Documentation/ApiReference/UI_Components/dxDataGrid/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 DataGrid's width. Use the [displayMode](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#displayMode) property to switch between modes. +The built-in 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. \ No newline at end of file +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. + +The DevExtreme DataGrid also supports external pagers. You can hide the built-in pager and configure a standalone [Pagination](/Documentation/Guide/UI_Components/Pagination/Overview/) component to control the DataGrid. For more information, refer to the following example: [DevExtreme DataGrid - Display a Pager Above the Grid](https://github.com/DevExpress-Examples/devextreme-datagrid-pager-on-top) \ No newline at end of file From 2f5a722320273fc6e85edf0538245ed184bc28cf Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Mon, 16 Mar 2026 13:23:39 +0400 Subject: [PATCH 2/6] Add Minor Fix --- apps/demos/Demos/DataGrid/RecordPaging/description.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/demos/Demos/DataGrid/RecordPaging/description.md b/apps/demos/Demos/DataGrid/RecordPaging/description.md index 33abeaa699b4..53559e832abf 100644 --- a/apps/demos/Demos/DataGrid/RecordPaging/description.md +++ b/apps/demos/Demos/DataGrid/RecordPaging/description.md @@ -18,4 +18,4 @@ In this demo, you can use the drop-down Display Mode menu to switch between full 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. -The DevExtreme DataGrid also supports external pagers. You can hide the built-in pager and configure a standalone [Pagination](/Documentation/Guide/UI_Components/Pagination/Overview/) component to control the DataGrid. For more information, refer to the following example: [DevExtreme DataGrid - Display a Pager Above the Grid](https://github.com/DevExpress-Examples/devextreme-datagrid-pager-on-top) \ No newline at end of file +The DevExtreme DataGrid also supports external pagers. You can hide the built-in pager and configure a standalone [Pagination](/Documentation/Guide/UI_Components/Pagination/Overview/) component to control the DataGrid. For additional information, refer to the following example: [DevExtreme DataGrid - Display a Pager Above the Grid](https://github.com/DevExpress-Examples/devextreme-datagrid-pager-on-top). \ No newline at end of file From 225bfc976bdbce0fa515498278f6a13f33963543 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Tue, 17 Mar 2026 15:57:49 +0400 Subject: [PATCH 3/6] Update Following Feedback & Add Improvements --- .../Demos/DataGrid/RecordPaging/description.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/apps/demos/Demos/DataGrid/RecordPaging/description.md b/apps/demos/Demos/DataGrid/RecordPaging/description.md index 53559e832abf..e731e229c6c7 100644 --- a/apps/demos/Demos/DataGrid/RecordPaging/description.md +++ b/apps/demos/Demos/DataGrid/RecordPaging/description.md @@ -1,21 +1,19 @@ -The DataGrid splits records into multiple pages. This technique helps optimize control performance: the client only needs to load and render one page at a time. Users can use a scroll bar or a pager to navigate between pages. This demo shows how to enable and customize the built-in pager. +The DevExtreme DataGrid supports data paging. The component can load rows in portions to improve performance when working with large data sets. This demo allows you to navigate between pages using the DataGrid's built-in pager. -The built-in pager is configured in the [pager](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/) object and contains the following elements: +The built-in [pager](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/) contains the following elements: - **Page navigator** Enables page navigation. - **Page size selector** -Changes the page size. To display this element, enable the [showPageSizeSelector](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#showPageSizeSelector) property. You can also define the [allowedPageSizes](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#allowedPageSizes) and specify the initial [pageSize](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/paging/#pageSize) in the [paging](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/paging/) object. +Changes the page size. To display this element, enable the [showPageSizeSelector](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#showPageSizeSelector) property. You can also define [allowed page sizes](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#allowedPageSizes) and specify an initial [page size](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/paging/#pageSize). - **Page information** -Displays the current page number and total record count. To display page information, enable the [showInfo](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#showInfo) property. You can also use the [infoText](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#infoText) property to customize the information text string. +Displays the current page number and total record count. To display page information, enable the [showInfo](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#showInfo) property. You can customize this [information text](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#infoText) as needed. -The built-in 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. +The built-in pager supports full, compact, and adaptive (default) [display modes](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#displayMode). In compact mode, the pager uses less screen space. In adaptive mode, the DataGrid automatically chooses between full and compact modes based on the component width. -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. +In this demo, you can use controls below the DataGrid to change the pager display mode and toggle the visibility of individual pager elements. Note that in compact mode, navigation buttons are always visible. The DevExtreme DataGrid also supports external pagers. You can hide the built-in pager and configure a standalone [Pagination](/Documentation/Guide/UI_Components/Pagination/Overview/) component to control the DataGrid. For additional information, refer to the following example: [DevExtreme DataGrid - Display a Pager Above the Grid](https://github.com/DevExpress-Examples/devextreme-datagrid-pager-on-top). \ No newline at end of file From f3986734be96c4c0c59d2d2ca6fe5583689d4fb0 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Tue, 17 Mar 2026 17:28:44 +0400 Subject: [PATCH 4/6] Apply suggestions from code review Co-authored-by: Elena Khamlyuk <80813840+khamlyuk@users.noreply.github.com> Signed-off-by: Arman Boyakhchyan --- apps/demos/Demos/DataGrid/RecordPaging/description.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/demos/Demos/DataGrid/RecordPaging/description.md b/apps/demos/Demos/DataGrid/RecordPaging/description.md index e731e229c6c7..bff6c704943d 100644 --- a/apps/demos/Demos/DataGrid/RecordPaging/description.md +++ b/apps/demos/Demos/DataGrid/RecordPaging/description.md @@ -1,4 +1,4 @@ -The DevExtreme DataGrid supports data paging. The component can load rows in portions to improve performance when working with large data sets. This demo allows you to navigate between pages using the DataGrid's built-in pager. +The DevExtreme DataGrid supports data paging. The component can load rows in chunks to improve performance when working with large data sets. This demo allows you to navigate between pages using the DataGrid pager. The built-in [pager](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/) contains the following elements: @@ -7,13 +7,13 @@ The built-in [pager](/Documentation/ApiReference/UI_Components/dxDataGrid/Config Enables page navigation. - **Page size selector** -Changes the page size. To display this element, enable the [showPageSizeSelector](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#showPageSizeSelector) property. You can also define [allowed page sizes](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#allowedPageSizes) and specify an initial [page size](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/paging/#pageSize). +Changes the page size. To display this element, enable the [showPageSizeSelector](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#showPageSizeSelector) property. You can also define [allowed page sizes](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#allowedPageSizes) and specify the initial [page size](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/paging/#pageSize). - **Page information** Displays the current page number and total record count. To display page information, enable the [showInfo](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#showInfo) property. You can customize this [information text](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#infoText) as needed. The built-in pager supports full, compact, and adaptive (default) [display modes](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#displayMode). In compact mode, the pager uses less screen space. In adaptive mode, the DataGrid automatically chooses between full and compact modes based on the component width. -In this demo, you can use controls below the DataGrid to change the pager display mode and toggle the visibility of individual pager elements. Note that in compact mode, navigation buttons are always visible. +In this demo, you can use controls below the DataGrid to change the pager display mode and toggle the visibility of individual pager elements. Note: in compact mode, navigation buttons are always visible. -The DevExtreme DataGrid also supports external pagers. You can hide the built-in pager and configure a standalone [Pagination](/Documentation/Guide/UI_Components/Pagination/Overview/) component to control the DataGrid. For additional information, refer to the following example: [DevExtreme DataGrid - Display a Pager Above the Grid](https://github.com/DevExpress-Examples/devextreme-datagrid-pager-on-top). \ No newline at end of file +The DevExtreme DataGrid also supports external pagers. You can hide the built-in pager and configure a standalone [Pagination](/Documentation/Guide/UI_Components/Pagination/Overview/) component to navigate the DataGrid. For additional information, refer to the following example: [DevExtreme DataGrid - Display a Pager Above the Grid](https://github.com/DevExpress-Examples/devextreme-datagrid-pager-on-top). \ No newline at end of file From d0244ef32cdf9bb98cda0d7db41e81ae3276448e Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Tue, 17 Mar 2026 17:31:09 +0400 Subject: [PATCH 5/6] Remove Repetition --- apps/demos/Demos/DataGrid/RecordPaging/description.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/demos/Demos/DataGrid/RecordPaging/description.md b/apps/demos/Demos/DataGrid/RecordPaging/description.md index bff6c704943d..48b3cf82d3b3 100644 --- a/apps/demos/Demos/DataGrid/RecordPaging/description.md +++ b/apps/demos/Demos/DataGrid/RecordPaging/description.md @@ -1,4 +1,6 @@ The DevExtreme DataGrid supports data paging. The component can load rows in chunks to improve performance when working with large data sets. This demo allows you to navigate between pages using the DataGrid pager. + +You can use controls below the DataGrid to change the pager display mode and toggle the visibility of individual pager elements. Note: in compact mode, navigation buttons are always visible. The built-in [pager](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/) contains the following elements: @@ -14,6 +16,4 @@ Displays the current page number and total record count. To display page informa The built-in pager supports full, compact, and adaptive (default) [display modes](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/#displayMode). In compact mode, the pager uses less screen space. In adaptive mode, the DataGrid automatically chooses between full and compact modes based on the component width. -In this demo, you can use controls below the DataGrid to change the pager display mode and toggle the visibility of individual pager elements. Note: in compact mode, navigation buttons are always visible. - The DevExtreme DataGrid also supports external pagers. You can hide the built-in pager and configure a standalone [Pagination](/Documentation/Guide/UI_Components/Pagination/Overview/) component to navigate the DataGrid. For additional information, refer to the following example: [DevExtreme DataGrid - Display a Pager Above the Grid](https://github.com/DevExpress-Examples/devextreme-datagrid-pager-on-top). \ No newline at end of file From 4089aab5394540e9e2b9afa47913c624e9b33e08 Mon Sep 17 00:00:00 2001 From: Arman Boyakhchyan Date: Tue, 17 Mar 2026 17:38:07 +0400 Subject: [PATCH 6/6] Apply suggestions from code review Co-authored-by: Elena Khamlyuk <80813840+khamlyuk@users.noreply.github.com> Signed-off-by: Arman Boyakhchyan --- apps/demos/Demos/DataGrid/RecordPaging/description.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/demos/Demos/DataGrid/RecordPaging/description.md b/apps/demos/Demos/DataGrid/RecordPaging/description.md index 48b3cf82d3b3..cbb36838b23b 100644 --- a/apps/demos/Demos/DataGrid/RecordPaging/description.md +++ b/apps/demos/Demos/DataGrid/RecordPaging/description.md @@ -1,6 +1,6 @@ The DevExtreme DataGrid supports data paging. The component can load rows in chunks to improve performance when working with large data sets. This demo allows you to navigate between pages using the DataGrid pager. -You can use controls below the DataGrid to change the pager display mode and toggle the visibility of individual pager elements. Note: in compact mode, navigation buttons are always visible. +You can use controls below the DataGrid to change pager display mode and toggle the visibility of individual pager elements. Note: navigation buttons are always visible in compact mode. The built-in [pager](/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/pager/) contains the following elements: