Ticket T1285910
Visible to All Users

DataGrid bugs with a fixed column

created 5 days ago (modified 5 days ago)

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:

  1. Navigate to this demo URL: https://js.devexpress.com/jQuery/Demos/WidgetsGallery/Demo/DataGrid/Overview/Light/
  2. Overwrite the index.js content with the snippet below and click apply.
  3. 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:

  1. Scroll all the way to the left and click to toggle one of the groupings open/closed. It works as expected.
  2. 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:

  1. Add the repaintChangesOnly: true option to the example grid settings above and click apply.
  2. Collapse all opened groups.
  3. Drag to increase the width of the Region column to allow horizontal scrolling to be possible in the grid.
  4. 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.

Answers approved by DevExpress Support

created 3 days ago

Hello Nathan,

Thank you for the code snippet and detailed steps.

We are aware of the first two bugs:

  1. DataGrid - Сolumn header lines are broken and the filter row search icon is duplicated if there are fixed, banded, and grouped columns
  2. DataGrid - Group row does not expand/collapse when scrolled horizontally, and there is at least one fixed column

Regarding the third bug, we'll research it and post our results in this public thread: DataGrid - Group row content is scrolled if repaintChangesOnly is enabled and the grid has a fixed column.

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.

I checked your sample but didn't notice any flashing effect in the grid (see the attached video). Could you please clarify if I missed an important step? I look forward to your response.

    Comments (2)

      Thanks for the update. I haven't been able to replicate the flashing we are seeing in your demo environment, however interestingly, the recommended workaround for the first two bugs of enabling legacy mode for column fixing seems to resolve the flashing issue as well so I suspect it's all related to the same underlying problem.

      Mark Ramirez (DevExpress Support) 2 days ago

        Hello Nathan,

        Thank you for your response.

        We can deduce that the flashing issue is related to the new columnFixing mode and grouped columns. However, since we are unable to reproduce and research the issue on our end, I cannot guarantee that it will be fixed when we fix the other issues. You can follow these steps to simplify the existing project where the issue occurs:

        1. Try isolating the problematic component(s). You can create a new project as a starting point. Often, real data is not necessary, and you can replace it with arbitrary arrays. If the same components work correctly in a sample, the issue is likely specific to other logic that you have on the page.

        2. Create a backup of the problematic page/component and remove adjacent CSS, markup, components, props, and event handlers one by one to determine which one causes the issue.

        3. Split the component's configuration code into two parts to make it simpler. Remove the first/second part and check if the issue persists. If so, repeat the same steps with the remaining code until the issue disappears.

        The recommendations above will help you find the problematic area of your code and extract it into a standalone example. With this example, I'll be in a better position to research the issue.

        Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

        Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.