Skip to content

Draft: Fix T1267691 #7

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

Open
Alyar666 wants to merge 1 commit into
base: 25_1
Choose a base branch
from
Open

Draft: Fix T1267691 #7

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
77 changes: 39 additions & 38 deletions packages/devextreme/js/__internal/grids/grid_core/data_controller/m_data_controller.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,41 +29,6 @@ import gridCoreUtils from '../m_utils';
import type { VirtualScrollController } from '../virtual_scrolling/m_virtual_scrolling_core';
import { DataHelperMixin } from './m_data_helper_mixin';

const changePaging = function (that, optionName, value) {
const dataSource = that._dataSource;

if (dataSource) {
if (value !== undefined) {
const oldValue = that._getPagingOptionValue(optionName);
if (oldValue !== value) {
if (optionName === 'pageSize') {
dataSource.pageIndex(0);
}
dataSource[optionName](value);

that._skipProcessingPagingChange = true;
that.option(`paging.${optionName}`, value);
that._skipProcessingPagingChange = false;
const pageIndex = dataSource.pageIndex();
that._isPaging = optionName === 'pageIndex';
return dataSource[optionName === 'pageIndex' ? 'load' : 'reload']()
.done(() => {
that._isPaging = false;
that.pageChanged.fire(pageIndex);
});
}
return Deferred().resolve().promise();
}
return dataSource[optionName]();
}

if (optionName === 'pageIndex' && value !== undefined) {
return Deferred().resolve().promise();
}

return 0;
};

interface HandleDataChangedArguments {
changeType?: 'refresh' | 'update' | 'loadError';
isDelayed?: boolean;
Expand Down Expand Up @@ -110,7 +75,7 @@ export class DataController extends DataHelperMixin(modules.Controller) {

protected _changes!: any[];

private readonly _skipProcessingPagingChange: boolean | undefined;
private _skipProcessingPagingChange: boolean | undefined;

private _useSortingGroupingFromColumns: boolean | undefined;

Expand Down Expand Up @@ -1598,15 +1563,51 @@ export class DataController extends DataHelperMixin(modules.Controller) {
return result;
}

protected changePaging(optionName, value) {
const dataSource = this._dataSource;

if (dataSource) {
if (value !== undefined) {
const oldValue = this._getPagingOptionValue(optionName);
if (oldValue !== value) {
if (optionName === 'pageSize') {
dataSource.pageIndex(0);
}
dataSource[optionName](value);

this._skipProcessingPagingChange = true;
// @ts-expect-error
this.option(`paging.${optionName}`, value);
this._skipProcessingPagingChange = false;
const pageIndex = dataSource.pageIndex();
this._isPaging = optionName === 'pageIndex';
return dataSource[optionName === 'pageIndex' ? 'load' : 'reload']()
.done(() => {
this._isPaging = false;
this.pageChanged.fire(pageIndex);
});
}
return Deferred().resolve().promise();
}
return dataSource[optionName]();
}

if (optionName === 'pageIndex' && value !== undefined) {
return Deferred().resolve().promise();
}

return 0;
}

/**
* @extended: virtual_scrolling
*/
public pageIndex(value?) {
return changePaging(this, 'pageIndex', value);
return this.changePaging('pageIndex', value);
}

public pageSize(value?) {
return changePaging(this, 'pageSize', value);
return this.changePaging('pageSize', value);
}

private beginCustomLoading(messageText) {
Expand Down
26 changes: 26 additions & 0 deletions packages/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -462,6 +462,32 @@ export const data = (Base: ModuleType<DataController>) => class VirtualScrolling

private _itemCount: any;

protected changePaging(optionName, value) {
if (value !== undefined && (isVirtualMode(this) || isAppendMode(this))) {
let scrollPosition = 0;
const pageSize = this._dataSource.pageSize() ?? 0;
const itemSize = this
.getItemSize();
const itemSizes = this
.getItemSizes();
const pageIndex = optionName === 'pageIndex' ? value : 0;
const itemIndex = pageIndex * pageSize;

scrollPosition = itemIndex * itemSize;

for (const index in itemSizes) {
// eslint-disable-next-line radix
if (parseInt(index) < itemIndex) {
scrollPosition += itemSizes[index] - itemSize;
}
}

this._rowsScrollController?.setViewportItemIndexByScrollPosition(scrollPosition);
}

return super.changePaging(optionName, value);
}

public dispose() {
const rowsScrollController = this._rowsScrollController;

Expand Down
8 changes: 8 additions & 0 deletions ...es/devextreme/js/__internal/grids/grid_core/virtual_scrolling/m_virtual_scrolling_core.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -266,6 +266,14 @@ class VirtualScrollController {
return this._isScrollingBack;
}

public setViewportItemIndexByScrollPosition(position) {
this._position = position;

const itemIndex = this.getItemIndexByPosition();

this.setViewportItemIndex(itemIndex);
}

private _setViewportPositionCore(position) {
const prevPosition = this._position || 0;
this._position = position;
Expand Down
126 changes: 126 additions & 0 deletions packages/devextreme/playground/T1220800_1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>DevExtreme jQuery Example</title>

<meta name="viewport" content="width=device-width, initial-scale=1">

<script type="text/javascript">
const currentThemeId = localStorage.getItem("currentThemeId") || "light";

const link = document.createElement("link");
link.href = `../artifacts/css/dx.${currentThemeId}.css`;
link.type = "text/css";
link.rel = "stylesheet";

document.getElementsByTagName("head")[0].appendChild(link);
</script>

<script type="text/javascript" src="../artifacts/js/jquery.js"></script>
<!-- HtmlEditor -->
<!-- <script type="text/javascript" src="../artifacts/js/dx-quill.min.js"></script> -->

<!--<script type="text/javascript" src="../artifacts/js/cldr.js"></script>
<script type="text/javascript" src="../artifacts/js/cldr/event.js"></script>
<script type="text/javascript" src="../artifacts/js/cldr/supplemental.js"></script>
<script type="text/javascript" src="../artifacts/js/cldr/unresolved.js"></script>
<script type="text/javascript" src="../artifacts/js/globalize.js"></script>
<script type="text/javascript" src="../artifacts/js/globalize/message.js"></script>
<script type="text/javascript" src="../artifacts/js/globalize/number.js"></script>
<script type="text/javascript" src="../artifacts/js/globalize/currency.js"></script>
<script type="text/javascript" src="../artifacts/js/globalize/date.js"></script>-->

<!--
<script type="text/javascript" src="../artifacts/js/exceljs.min.js"></script>
<script type="text/javascript" src="../artifacts/js/FileSaver.min.js"></script>
<script type="text/javascript" src="../artifacts/js/jszip.min.js"></script>
<script type="text/javascript" src="../artifacts/js/jspdf.umd.min.js"></script>
<script type="text/javascript" src="../artifacts/js/jspdf.plugin.autotable.min.js"></script>
-->

<script type="text/javascript" src="../artifacts/js/dx.all.debug.js" charset="utf-8"></script>
<script type="text/javascript" src="./themeSelector.js"></script>
<script type="text/javascript" src="../../../node_modules/axe-core/axe.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/devextreme-aspnet-data@3.0.0/js/dx.aspnet.data.js"></script>
</head>
<body class="dx-surface">
<div role="main">
<h1 style="position: fixed; left: 0; top: 0; clip: rect(1px, 1px, 1px, 1px);">Test header</h1>

<select id="theme-selector" style="display: block;">
</select>
<br />
<div id="btn"></div>
<div id="gridContainer">
<script>
$(() => {
$('#btn').dxButton({
text: 'test',
onClick() {
grid.navigateToRow(10021).then(() => {
grid.selectRows([10021], false);
});
}
})

var grid = $('#gridContainer').dxDataGrid({
dataSource: DevExpress.data.AspNet.createStore({
key: 'Id',
loadUrl: 'https://js.devexpress.com/Demos/WidgetsGalleryDataService/api/Sales',
}),
width: 900,
height: 300,
selection: { mode: 'multiple' },
searchPanel: { visible: true },
remoteOperations: true,
scrolling: {
mode: 'virtual',
rowRenderingMode: 'virtual',
},
paging: {
pageSize: 20,
},
headerFilter: {
visible: true,
search: {
enabled: true,
},
},
wordWrapEnabled: true,
showBorders: true,
columns: [{
dataField: 'Id',
width: 90,
}, {
caption: 'Store',
dataField: 'StoreName',
width: 150,
}, {
caption: 'Category',
dataField: 'ProductCategoryName',
width: 120,
}, {
caption: 'Product',
dataField: 'ProductName',
}, {
caption: 'Date',
dataField: 'DateKey',
dataType: 'date',
format: 'yyyy-MM-dd',
width: 110,
}, {
caption: 'Amount',
dataField: 'SalesAmount',
format: 'currency',
headerFilter: {
groupInterval: 1000,
},
width: 100,
}],
}).dxDataGrid('instance');
});

</script>
</div>
</body>
</html>
Loading
Loading