Skip to content

Commit

Permalink
DataGrid should not scroll top after navigate to row on the same page…
Browse files Browse the repository at this point in the history 
… if scrolling.mode and scrolling.rowRenderingMode are 'virtual' (T836612) (#11452)

* DataGrid should not scroll top after navigate to row on the same page if scrolling.mode and scrolling.rowRenderingMode are 'virtual' (T836612)

* Remove unnecessary comma
  • Loading branch information
@AntonSermyazhko
AntonSermyazhko authored Jan 17, 2020
1 parent b92b347 commit 98226ec
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 33 deletions.
62 changes: 29 additions & 33 deletions js/ui/grid_core/ui.grid_core.focus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -176,7 +176,7 @@ exports.FocusController = core.ViewController.inherit((function() {
if(that.isRowFocused(key)) {
d.resolve(that._getFocusedRowIndexByKey(key));
} else {
that._navigateToVisibleRow(key, d, needFocusRow);
that._navigateTo(key, d, needFocusRow);
}
}).fail(d.reject);
} else {
Expand Down Expand Up @@ -204,10 +204,7 @@ exports.FocusController = core.ViewController.inherit((function() {
if(needFocusRow) {
this._triggerUpdateFocusedRow(key, deferred);
} else {
const rowsView = this.getView('rowsView');
const rowIndex = this.getController('data').getRowIndexByKey(key);
const rowElement = rowsView.getRow(rowIndex);
rowsView.scrollToElementVertically(rowElement);
this.getView('rowsView').scrollToRowElement(key);
}
},
_navigateToVirtualRow: function(key, deferred, needFocusRow) {
Expand Down Expand Up @@ -246,9 +243,7 @@ exports.FocusController = core.ViewController.inherit((function() {
focusedRowKey: key
});
} else {
const rowIndex = dataController.getRowIndexByKey(key);
const rowsView = this.getView('rowsView');
rowsView.scrollToElementVertically(rowsView.getRow(rowIndex));
this.getView('rowsView').scrollToRowElement(key);
}

deferred && deferred.resolve(focusedRowIndex);
Expand Down Expand Up @@ -770,33 +765,28 @@ module.exports = {
const tabIndex = that.option('tabIndex') || 0;
let rowIndex = that._dataController.getRowIndexByKey(focusedRowKey);
let columnIndex = that.option('focusedColumnIndex');
let rowElement = that._findRowElementForTabIndex();

if(rowElement) {
that._scrollToFocusOnResize = that._scrollToFocusOnResize || function() {
rowElement = that._findRowElementForTabIndex();
if(rowElement) {
that.scrollToElementVertically(rowElement);
that.resizeCompleted.remove(that._scrollToFocusOnResize);
}
};
const $row = that._findRowElementForTabIndex();

$(rowElement).attr('tabIndex', tabIndex);
that._scrollToFocusOnResize = that._scrollToFocusOnResize || function() {
that.scrollToElementVertically(that._findRowElementForTabIndex());
that.resizeCompleted.remove(that._scrollToFocusOnResize);
};

if(rowIndex >= 0) {
if(columnIndex < 0) {
columnIndex = 0;
}
$row.attr('tabIndex', tabIndex);

rowIndex += that.getController('data').getRowIndexOffset();
that.getController('keyboardNavigation').setFocusedCellPosition(rowIndex, columnIndex);
if(rowIndex >= 0) {
if(columnIndex < 0) {
columnIndex = 0;
}

const dataSource = that.component.getController('data')._dataSource;
const operationTypes = dataSource && dataSource.operationTypes();
if(operationTypes && !operationTypes.paging) {
that.resizeCompleted.remove(that._scrollToFocusOnResize);
that.resizeCompleted.add(that._scrollToFocusOnResize);
}
rowIndex += that.getController('data').getRowIndexOffset();
that.getController('keyboardNavigation').setFocusedCellPosition(rowIndex, columnIndex);

const dataSource = that.component.getController('data')._dataSource;
const operationTypes = dataSource && dataSource.operationTypes();
if(operationTypes && !operationTypes.paging) {
that.resizeCompleted.remove(that._scrollToFocusOnResize);
that.resizeCompleted.add(that._scrollToFocusOnResize);
}
}
},
Expand All @@ -806,10 +796,16 @@ module.exports = {
return $(this.getRowElement(rowIndex >= 0 ? rowIndex : 0));
},

scrollToElementVertically: function($element) {
scrollToRowElement: function(key) {
const rowIndex = this.getController('data').getRowIndexByKey(key);
const $row = $(this.getRow(rowIndex));
this.scrollToElementVertically($row);
},

scrollToElementVertically: function($row) {
const scrollable = this.getScrollable();
if(scrollable) {
const position = scrollable.getScrollElementPosition($element, 'vertical');
const position = scrollable.getScrollElementPosition($row, 'vertical');
scrollable.scrollTo({ top: position });
}
}
Expand Down
32 changes: 32 additions & 0 deletions testing/tests/DevExpress.ui.widgets.dataGrid/dataGrid.tests.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4326,6 +4326,38 @@ QUnit.test('DataGrid - navigateToRow method should work if rowRenderingMode is \
assert.equal(dataGrid.getVisibleRows().filter(row => row.key === navigateRowKey).length, 1, 'navigated row is visible');
});

['standard', 'infinite', 'virtual'].forEach((scrollingMode) => {
['standard', 'virtual'].forEach((columnRenderingMode) => {
QUnit.test(`Grid should not scroll top after navigate to row on the same page if scrolling.mode is ${scrollingMode} and scrolling.rowRenderingMode is ${columnRenderingMode} (T836612)`, function(assert) {
// arrange
const data = [];

for(let i = 0; i < 100; ++i) {
data.push({ id: i });
}

const dataGrid = $('#dataGrid').dxDataGrid({
height: 200,
keyExpr: 'id',
dataSource: data,
scrolling: {
mode: 'virtual',
rowRenderingMode: 'virtual',
useNative: false
},
loadingTimeout: undefined
}).dxDataGrid('instance');

// act
dataGrid.navigateToRow(35);
dataGrid.navigateToRow(20);

// assert
assert.equal(dataGrid.pageIndex(), 1, 'Page index');
});
});
});

QUnit.test('DataGrid - Focus row by visible content in \'rowRenderingMode\' should not render rows (T820296)', function(assert) {
// arrange
const data = [];
Expand Down

0 comments on commit 98226ec

Please sign in to comment.