We have been experiencing several quirky bugs with DevExtreme Data Grids under certain configurations and I have been able to reproduce these via the jquery datagrid demo on your website.
Setup:
- Navigate to this demo URL: https://js.devexpress.com/jQuery/Demos/WidgetsGallery/Demo/DataGrid/Overview/Light/
- Overwrite the index.js content with the snippet below and click apply.
- Drag to increase the width of the Region column to allow horizontal scrolling to be possible in the grid.
JavaScript$(() => {
$('#gridContainer').dxDataGrid({
dataSource: {
store: {
type: 'odata',
version: 2,
url: 'https://js.devexpress.com/Demos/SalesViewer/odata/DaySaleDtoes',
key: 'Id',
beforeSend(request) {
const year = new Date().getFullYear() - 1;
request.params.startDate = `${year}-05-10`;
request.params.endDate = `${year}-5-15`;
},
},
},
allowColumnResizing: true,
columnResizingMode: 'widget',
columnFixing: {
enabled: true,
},
filterRow: {
visible: true,
applyFilter: 'auto',
},
paging: {
pageSize: 10,
},
allowColumnResizing: true,
columnResizingMode: 'widget',
pager: {
visible: true,
showPageSizeSelector: true,
allowedPageSizes: [10, 25, 50, 100],
},
remoteOperations: false,
searchPanel: {
visible: true,
highlightCaseSensitive: true,
},
groupPanel: { visible: true },
grouping: {
autoExpandAll: false,
},
allowColumnReordering: true,
rowAlternationEnabled: true,
showBorders: true,
width: '100%',
columns: [
{
dataField: 'Product',
groupIndex: 0,
},
{
dataField: 'Amount',
caption: 'Sale Amount',
dataType: 'number',
format: 'currency',
alignment: 'right',
},
{
dataField: 'Discount',
caption: 'Discount %',
dataType: 'number',
format: 'percent',
alignment: 'right',
allowGrouping: false,
cellTemplate: discountCellTemplate,
cssClass: 'bullet',
},
{
dataField: 'SaleDate',
dataType: 'date',
},
{
dataField: 'Region',
dataType: 'string',
},
{
dataField: 'Sector',
dataType: 'string',
},
{
dataField: 'Channel',
dataType: 'string',
},
{
dataField: 'Customer',
dataType: 'string',
width: 150,
},
],
onContentReady(e) {
if (!collapsed) {
collapsed = true;
e.component.expandRow(['EnviroCare']);
}
},
});
});
const discountCellTemplate = function (container, options) {
$('<div/>').dxBullet({
onIncidentOccurred: null,
size: {
width: 150,
height: 35,
},
margin: {
top: 5,
bottom: 0,
left: 5,
},
showTarget: false,
showZeroLevel: true,
value: options.value * 100,
startScaleValue: 0,
endScaleValue: 100,
tooltip: {
enabled: true,
font: {
size: 18,
},
paddingTopBottom: 2,
customizeTooltip() {
return { text: options.text };
},
zIndex: 5,
},
}).appendTo(container);
};
let collapsed = false;
BUG 1:
Slowly scroll horizontally to the right and pay attention to the hourglasses in the filter row. They will disappear behind the fixed Sale Amount column as expected but then briefly reappear above the grouping carrot column unexpectedly.
BUG 2:
- Scroll all the way to the left and click to toggle one of the groupings open/closed. It works as expected.
- Now scroll slightly to the right and try again and notice that the groups can no longer be expanded/collapsed.
Adding expandMode: 'rowClick' to the grouping options seems to be a workaround for this bug however we have also noticed that when scrolled to the right there is strange flashing of the text of the grid as you open/close groups. Opening and closing the groups while scrolled all the way to the left does not cause this flashing.
BUG 3:
- Add the repaintChangesOnly: true option to the example grid settings above and click apply.
- Collapse all opened groups.
- Drag to increase the width of the Region column to allow horizontal scrolling to be possible in the grid.
- Scroll to the right and see some of the fixed cells scroll to the left while others stay in place. Which cells scroll changes depending on which group was last expanded/collapsed.
Please let me know if there is anything else I can do to help you understand or track down these issues.