24_1 data grid demos pager fix cherry pick

apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Angular/app/app.component.html

@@ -5,6 +5,7 @@
   [showBorders]="true"
 >
   <dxo-paging [pageSize]="15"></dxo-paging>
+  <dxo-pager [visible]="true"></dxo-pager>
   <dxi-column dataField="ContactName"></dxi-column>
   <dxi-column dataField="ContactTitle"></dxi-column>
   <dxi-column dataField="CompanyName"></dxi-column>

apps/demos/Demos/DataGrid/AdvancedMasterDetailView/React/App.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import {
-  Column, DataGrid, MasterDetail, Paging,
+  Column, DataGrid, MasterDetail, Paging, Pager,
 } from 'devextreme-react/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import MasterDetailView from './MasterDetailView.tsx';
@@ -25,6 +25,7 @@ const App = () => (
       component={MasterDetailView}
     />
     <Paging defaultPageSize={15} />
+    <Pager visible={true} />
 
     <Column dataField="ContactName" />
     <Column dataField="ContactTitle" />

apps/demos/Demos/DataGrid/AdvancedMasterDetailView/ReactJs/App.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  Column, DataGrid, MasterDetail, Paging,
+  Column, DataGrid, MasterDetail, Paging, Pager,
 } from 'devextreme-react/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import MasterDetailView from './MasterDetailView.js';
@@ -22,6 +22,7 @@ const App = () => (
       component={MasterDetailView}
     />
     <Paging defaultPageSize={15} />
+    <Pager visible={true} />
 
     <Column dataField="ContactName" />
     <Column dataField="ContactTitle" />

apps/demos/Demos/DataGrid/AdvancedMasterDetailView/Vue/App.vue

@@ -6,6 +6,7 @@
     :show-borders="true"
   >
     <DxPaging :page-size="15"/>
+    <DxPager :visible="true"/>
 
     <DxColumn data-field="ContactName"/>
     <DxColumn data-field="ContactTitle"/>
@@ -27,6 +28,7 @@ import {
   DxDataGrid,
   DxColumn,
   DxPaging,
+  DxPager,
   DxMasterDetail,
 } from 'devextreme-vue/data-grid';
 

apps/demos/Demos/DataGrid/AdvancedMasterDetailView/jQuery/index.js

@@ -10,6 +10,9 @@ $(() => {
     paging: {
       pageSize: 15,
     },
+    pager: {
+      visible: true,
+    },
     remoteOperations: true,
     columns: [
       'ContactName',

apps/demos/Demos/DataGrid/BatchUpdateRequest/Angular/app/app.component.html

@@ -12,7 +12,7 @@
     [allowDeleting]="true"
     [allowUpdating]="true"
   ></dxo-editing>
-
+  <dxo-pager [visible]="true"></dxo-pager>
   <dxi-column dataField="OrderID" [allowEditing]="false"></dxi-column>
   <dxi-column dataField="ShipName"></dxi-column>
   <dxi-column dataField="ShipCountry"></dxi-column>

apps/demos/Demos/DataGrid/BatchUpdateRequest/React/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import DataGrid, { DataGridRef, Column, DataGridTypes, Editing } from 'devextreme-react/data-grid';
+import DataGrid, { DataGridRef, Column, DataGridTypes, Editing, Pager, } from 'devextreme-react/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import 'whatwg-fetch';
 
@@ -58,6 +58,7 @@ const App = () => (
       allowDeleting={true}
       allowUpdating={true}
     />
+    <Pager visible={true} />
     <Column dataField="OrderID" allowEditing={false}></Column>
     <Column dataField="ShipName"></Column>
     <Column dataField="ShipCountry"></Column>

apps/demos/Demos/DataGrid/BatchUpdateRequest/ReactJs/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import DataGrid, { Column, Editing } from 'devextreme-react/data-grid';
+import DataGrid, { Column, Editing, Pager } from 'devextreme-react/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import 'whatwg-fetch';
 
@@ -51,6 +51,7 @@ const App = () => (
       allowDeleting={true}
       allowUpdating={true}
     />
+    <Pager visible={true} />
     <Column
       dataField="OrderID"
       allowEditing={false}

apps/demos/Demos/DataGrid/BatchUpdateRequest/Vue/App.vue

@@ -13,6 +13,7 @@
       :allow-deleting="true"
       :allow-updating="true"
     />
+    <DxPager :visible="true"/>
     <DxColumn
       data-field="OrderID"
       :allow-editing="false"
@@ -30,7 +31,7 @@
 </template>
 <script setup lang="ts">
 import {
-  DxDataGrid, DxColumn, DxEditing, DxDataGridTypes,
+  DxDataGrid, DxColumn, DxEditing, DxDataGridTypes, DxPager,
 } from 'devextreme-vue/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import 'whatwg-fetch';

apps/demos/Demos/DataGrid/BatchUpdateRequest/jQuery/index.js

@@ -9,6 +9,9 @@ $(() => {
         ajaxOptions.xhrFields = { withCredentials: true };
       },
     }),
+    pager: {
+      visible: true,
+    },
     showBorders: true,
     editing: {
       mode: 'batch',

apps/demos/Demos/DataGrid/CellCustomization/Angular/app/app.component.html

@@ -7,8 +7,8 @@
   [showBorders]="true"
 >
   <dxo-sorting mode="none"></dxo-sorting>
+  <dxo-pager [visible]="true"></dxo-pager>
   <dxo-paging [pageSize]="10"></dxo-paging>
-
   <dxi-column dataField="date" [width]="110" dataType="date"></dxi-column>
   <dxi-column caption="Open" cellTemplate="diffCellTemplate"></dxi-column>
   <dxi-column caption="Close" cellTemplate="diffCellTemplate"></dxi-column>

apps/demos/Demos/DataGrid/CellCustomization/React/App.tsx

@@ -3,6 +3,7 @@ import DataGrid, {
   Column,
   Sorting,
   Paging,
+  Pager,
 } from 'devextreme-react/data-grid';
 import { weekData } from './data.ts';
 import DiffCell from './DiffCell.tsx';
@@ -17,6 +18,7 @@ const App = () => (
     showBorders={true}>
     <Sorting mode="none" />
     <Paging defaultPageSize={10} />
+    <Pager visible={true} />
     <Column dataField="date" width={110} dataType="date" />
     <Column caption="Open" cellRender={DiffCell} />
     <Column caption="Close" cellRender={DiffCell} />

apps/demos/Demos/DataGrid/CellCustomization/ReactJs/App.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import DataGrid, { Column, Sorting, Paging } from 'devextreme-react/data-grid';
+import DataGrid, {
+  Column, Sorting, Paging, Pager,
+} from 'devextreme-react/data-grid';
 import { weekData } from './data.js';
 import DiffCell from './DiffCell.js';
 import ChartCell from './ChartCell.js';
@@ -15,6 +17,7 @@ const App = () => (
   >
     <Sorting mode="none" />
     <Paging defaultPageSize={10} />
+    <Pager visible={true} />
     <Column
       dataField="date"
       width={110}

apps/demos/Demos/DataGrid/CellCustomization/Vue/App.vue

@@ -10,6 +10,7 @@
     >
       <DxSorting mode="none"/>
       <DxPaging :page-size="10"/>
+      <DxPager :visible="true"/>
       <DxColumn
         :width="110"
         data-field="date"
@@ -50,7 +51,7 @@
 </template>
 <script setup lang="ts">
 import {
-  DxDataGrid, DxColumn, DxSorting, DxPaging,
+  DxDataGrid, DxColumn, DxSorting, DxPaging, DxPager,
 } from 'devextreme-vue/data-grid';
 
 import DiffCell from './DiffCell.vue';

apps/demos/Demos/DataGrid/CellCustomization/jQuery/index.js

@@ -11,6 +11,9 @@ $(() => {
     paging: {
       pageSize: 10,
     },
+    pager: {
+      visible: true,
+    },
     onCellPrepared(options) {
       const fieldData = options.value;
       let fieldHtml = '';

apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/Angular/app/app.component.html

@@ -3,4 +3,6 @@
   [dataSource]="orders"
   keyExpr="OrderNumber"
   [showBorders]="true"
-></dx-data-grid>
+>
+  <dxo-pager [visible]="true"></dxo-pager>
+</dx-data-grid>

apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/React/App.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import DataGrid from 'devextreme-react/data-grid';
+import DataGrid, { Pager } from 'devextreme-react/data-grid';
 import { orders } from './data.ts';
 
 const App = () => (
@@ -8,7 +8,9 @@ const App = () => (
     dataSource={orders}
     keyExpr="OrderNumber"
     showBorders={true}
-  />
+  >
+    <Pager visible={true} />
+  </DataGrid>
 );
 
 export default App;

apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/ReactJs/App.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import DataGrid from 'devextreme-react/data-grid';
+import DataGrid, { Pager } from 'devextreme-react/data-grid';
 import { orders } from './data.js';
 
 const App = () => (
@@ -8,6 +8,8 @@ const App = () => (
     dataSource={orders}
     keyExpr="OrderNumber"
     showBorders={true}
-  />
+  >
+    <Pager visible={true} />
+  </DataGrid>
 );
 export default App;

apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/Vue/App.vue

@@ -4,10 +4,12 @@
     :data-source="orders"
     key-expr="OrderNumber"
     :show-borders="true"
-  />
+  >
+    <DxPager :visible="true"/>
+  </DxDataGrid>
 </template>
 <script setup lang="ts">
-import DxDataGrid from 'devextreme-vue/data-grid';
+import { DxDataGrid, DxPager } from 'devextreme-vue/data-grid';
 import { orders } from './data.ts';
 
 </script>

apps/demos/Demos/DataGrid/ColumnsBasedOnADataSource/jQuery/index.js

@@ -3,5 +3,8 @@ $(() => {
     dataSource: orders,
     keyExpr: 'OrderNumber',
     showBorders: true,
+    pager: {
+      visible: true,
+    }
   });
 });

apps/demos/Demos/DataGrid/CustomDataSource/Angular/app/app.component.html

@@ -13,6 +13,7 @@
   </dxi-column>
   <dxo-paging [pageSize]="12"></dxo-paging>
   <dxo-pager
+    [visible]="true"
     [showPageSizeSelector]="true"
     [allowedPageSizes]="[8, 12, 20]"
   ></dxo-pager>

apps/demos/Demos/DataGrid/CustomDataSource/React/App.tsx

@@ -73,6 +73,7 @@ const App = () => (
     />
     <Paging defaultPageSize={12} />
     <Pager
+      visible={true}
       showPageSizeSelector={true}
       allowedPageSizes={allowedPageSizes}
     />

apps/demos/Demos/DataGrid/CustomDataSource/ReactJs/App.js

@@ -75,6 +75,7 @@ const App = () => (
     />
     <Paging defaultPageSize={12} />
     <Pager
+      visible={true}
       showPageSizeSelector={true}
       allowedPageSizes={allowedPageSizes}
     />

apps/demos/Demos/DataGrid/CustomDataSource/Vue/App.vue

@@ -31,6 +31,7 @@
     />
     <DxPaging :page-size="12"/>
     <DxPager
+      :visible="true"
       :show-page-size-selector="true"
       :allowed-page-sizes="[8, 12, 20]"
     />

apps/demos/Demos/DataGrid/CustomDataSource/jQuery/index.js

@@ -47,6 +47,7 @@ $(() => {
       pageSize: 12,
     },
     pager: {
+      visible: true,
       showPageSizeSelector: true,
       allowedPageSizes: [8, 12, 20],
     },

apps/demos/Demos/DataGrid/CustomEditors/Angular/app/app.component.html

@@ -5,6 +5,7 @@
   (onRowInserted)="$event.component.navigateToRow($event.key)"
 >
   <dxo-paging [enabled]="true" [pageSize]="15"></dxo-paging>
+  <dxo-pager [visible]="true"></dxo-pager>
   <dxo-header-filter [visible]="true"></dxo-header-filter>
   <dxo-search-panel [visible]="true"></dxo-search-panel>
   <dxo-editing mode="cell" [allowUpdating]="true" [allowAdding]="true">

apps/demos/Demos/DataGrid/CustomEditors/React/App.tsx

@@ -8,6 +8,7 @@ import DataGrid, {
   Lookup,
   RequiredRule,
   DataGridTypes,
+  Pager,
 } from 'devextreme-react/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import SelectBox, { SelectBoxTypes } from 'devextreme-react/select-box';
@@ -94,6 +95,7 @@ const App = () => (
       onRowInserted={onRowInserted}
     >
       <Paging enabled={true} defaultPageSize={15} />
+      <Pager visible={true} />
       <HeaderFilter visible={true} />
       <SearchPanel visible={true} />
       <Editing

apps/demos/Demos/DataGrid/CustomEditors/ReactJs/App.js

@@ -7,6 +7,7 @@ import DataGrid, {
   Column,
   Lookup,
   RequiredRule,
+  Pager,
 } from 'devextreme-react/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import SelectBox from 'devextreme-react/select-box';
@@ -85,6 +86,7 @@ const App = () => (
         enabled={true}
         defaultPageSize={15}
       />
+      <Pager visible={true} />
       <HeaderFilter visible={true} />
       <SearchPanel visible={true} />
       <Editing

apps/demos/Demos/DataGrid/CustomEditors/Vue/App.vue

@@ -8,6 +8,7 @@
       :enabled="true"
       :page-size="15"
     />
+    <DxPager :visible="true"/>
     <DxHeaderFilter :visible="true"/>
     <DxSearchPanel :visible="true"/>
     <DxEditing
@@ -99,6 +100,7 @@ import {
   DxLookup,
   DxRequiredRule,
   DxDataGridTypes,
+  DxPager,
 } from 'devextreme-vue/data-grid';
 import { createStore } from 'devextreme-aspnet-data-nojquery';
 import EmployeeDropDownBoxComponent from './EmployeeDropDownBoxComponent.vue';

apps/demos/Demos/DataGrid/CustomEditors/jQuery/index.js

@@ -14,6 +14,9 @@ $(() => {
       enabled: true,
       pageSize: 15,
     },
+    pager:{
+      visible: true,
+    },
     headerFilter: {
       visible: true,
     },

apps/demos/Demos/DataGrid/CustomNewRecordPosition/Angular/app/app.component.html

@@ -18,6 +18,7 @@
     [changes]="changes"
     [(editRowKey)]="editRowKey"
   ></dxo-editing>
+  <dxo-pager [visible]="true"></dxo-pager>
 
   <dxi-column dataField="OrderID" [allowEditing]="false"></dxi-column>
   <dxi-column dataField="OrderDate" dataType="date">

apps/demos/Demos/DataGrid/CustomNewRecordPosition/React/App.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import DataGrid, {
-  Column, Editing, ValidationRule, Button, IButtonProps, Toolbar, Item, Scrolling, DataGridTypes,
+  Column, Editing, ValidationRule, Button, IButtonProps, Toolbar, Item, Scrolling, DataGridTypes, Pager,
 } from 'devextreme-react/data-grid';
 import SelectBox from 'devextreme-react/select-box';
 import Guid from 'devextreme/core/guid';
@@ -56,6 +56,7 @@ const App = () => {
           editRowKey={editRowKey}
           onEditRowKeyChange={setEditRowKey}
         />
+        <Pager visible={true} />
 
         <Column dataField='OrderID' allowEditing={false} />
         <Column dataField='OrderDate' dataType='date'>