Horizontal scrolling only works in the content areas, not header, which is confusing

[mattheworiordan]

I'm submitting a ...

[x] bug report => see 'Providing a Reproducible Scenario'

Providing a Reproducible Scenario

• Easily reproduced with any grid with column headers that have children (see GIF below)
• Ensure the grid column headers are wider than the viewport
• Scroll horizontally over the header area, and nothing happens. Do the same over the grid content, and it scrolls as expected.

In your Plunker for your own example https://www.ag-grid.com/javascript-grid-grouping-headers/#advanced-grouping-example you can see this problem.

Current behaviour:

• Scrolling horizontally is only possible in the grid content / row area

Expected behaviour.

• Scrolling horizontally is possible anywhere in the grid view area

Please tell us about your environment:

Various, tried in Chrome, Safari, Firefox, same problem. It's not an env problem. Tried with your live demos, so latest versions too. Tested locally with latest from https://unpkg.com/ag-grid-community/dist/ag-grid-community.min.noStyle.js

• ag-Grid version: 19.0.0

• Browser: Various, tried in Chrome, Safari, Firefox

• Language: all

[nametakenalready]

Hi,

i am having this issue as well but only on my macbook. By default iOS captures swipe gestures on the magicmouse and the trackpad for history-back/forward commands. Using my Test-Laptop with Win7/Win10 the horizontal scroll works just fine.

I am looking further into this since it would be nice to 'swipe-scroll' on the table-header as well when using iOS but the scroll is only triggered on elements with the property set and the header is repositioned with the left attribute. This makes it look like only dirty, hacky solutions will work.

Would be happy for any input on where to start without creating additional elements and registering own events to move the table.

[makinggoodsoftware]

Hi,

Thank you for your email. We are aware of this issue and have a feature request in our backlog:

You can follow the status of feature requests, bugs and releases using our pipeline: https://www.ag-grid.com/ag-grid-pipeline/

If you are an ag-Grid Enterprise Customer, please raise this in our Zendesk support system - contact info@ag-grid.com for access. This is our primary channel for Support.

This is the reference and summary of the relevant issue:

AG-2065	Horizontal scrolling on the header section, scrolls the page instead of grid viewport

[mattheworiordan]

@makinggoodsoftware it looks like "AG-2065" has been deleted, and the issue still persists? What happened?

[mattheworiordan]

Hi. This is still not fixed and no update on why the issue was removed.

[harsh00008]

Hi, is there a plan to fix this?

[kimhjona]

Confirming that I'm still running into this exact issue. If it helps at all, the onBodyScroll thinks that all scroll directions are vertical and the coordinates are all (0,0) which it should not be.

[soulfresh]

I'm still having this issue as well. This scrolling behavior is confusing from a UX perspective as it suggests to the user that there is no clipped content even though there is.

[kiril-matev]

Hello!

Thank you for bringing this up with us.

This is still an active requirement for us with reference: AG-2065 [Scrolling] Allow scrolling horizontally using the trackpad/mouse wheel when over the column headers

You can follow the status of feature requests, bugs and releases using our pipeline: https://www.ag-grid.com/ag-grid-pipeline/

Now that this requirement is recorded in our backlog, we will soon close the GitHub issue because we will not update it when this feature is added in a future version of AG Grid. The best way to get an update on this item is to sign up for AG Grid new release notifications. Once a new AG Grid version is released, look for the item reference above (AG-XXXX) on the changelog page to see if it's resolved in that version: https://www.ag-grid.com/ag-grid-changelog/

Thanks again for bringing this up with us - we appreciate your time!

[jodaka]

Bump!

This issue is 3 years old.

It's not just a minor usability feature, it's an annoying bug that confuses our users.

[lambainsaan]

Are there any workarounds for this?

[kiril-matev]

Hello @lambainsaan!

At this point there are no workarounds for this. Scrolling is a core feature of the grid and changes to this have great impact across the grid. This is why this functionality needs to be implemented in the core code of the grid and can't be achieved via a workaround.

This is a fundamental change to the way headers are scrolled and needs to be planned, implemented and tested in a way to ensure it works with all the features provided by the grid. This is why at this stage we don't have a timeline for its implementation.

We are aware this may be causing confusion for some of your users and we apologise for this. I hope you can treat this as a known behavior and inform your users that this isn't supported at this time.

Thanks for bringing this up and allowing us to clarify this point.

[otang]

Would also like this

[shreyansqt]

Workaround that worked for me

const scrollHorizontal = (left: number) => {
  const viewport = document.querySelector(
    `[grid-id='${gridId}'] [ref="eViewport"]`
  );
  if (!viewport) return;
  viewport.scrollLeft = left;
};

// in onGridReady or onMounted or similar 👇🏽

  const headerViewport = document.querySelector(
    `[grid-id='${gridId}'] .ag-header-viewport`
  );

  if (headerViewport) {
    headerViewport.addEventListener("wheel", (e: Event) => {
      e.preventDefault();
      const left = headerViewport.scrollLeft + (e as WheelEvent).deltaX;
      scrollHorizontal(left);
    });
  }

[driatvak]

Hi, any news on this topic ? Thanks @shreyansqt for your solution but I would prefer something more natif...

[andrew-maltsev]

Hey ag-grid development team. Why this closed??? This is crusial core functionality and it doesn't work, please fix that.

[AG-Zoheil]

Hello,

Thank you all for your comments.

When issues get identified and assigned to our backlog, the corresponding GitHub issue will be labelled with the backlog reference number and the issue will be closed.

In this case, AG-2065 is the backlog item for this feature.

We have no timeline for this at the moment, but this can still be picked up by our team when they're making modifications to this functional area of AG Grid. Please use the functionality currently provided by AG Grid until this is delivered at a later point.

The best way to track this is to sign up for AG Grid new release notifications using the instructions here. This way you'll know as soon as a new version is out and you can check whether this specific item was implemented on the changelog page.

Kind regards, Zoheil

[simonkubica]

+1 to all comments here, this is a crucial issue for us (on the Enterprise plan) and major usability issue

[ashray17aman]

Workaround that worked for me

const scrollHorizontal = (left: number) => {
  const viewport = document.querySelector(
    `[grid-id='${gridId}'] [ref="eViewport"]`
  );
  if (!viewport) return;
  viewport.scrollLeft = left;
};

// in onGridReady or onMounted or similar 👇🏽

  const headerViewport = document.querySelector(
    `[grid-id='${gridId}'] .ag-header-viewport`
  );

  if (headerViewport) {
    headerViewport.addEventListener("wheel", (e: Event) => {
      e.preventDefault();
      const left = headerViewport.scrollLeft + (e as WheelEvent).deltaX;
      scrollHorizontal(left);
    });
  }

This query did not work for me, as the selector in scrollHorizontal wasn't able to identify the div properly. Replace the query in scrollHorizontal with below.

 `[grid-id="${gridId}"]` .ag-body-horizontal-scroll-viewport`; 

[eashgpt]

Any updates??

[simonkubica]

Hey @AG-Zoheil, just wanted to gently bump this issue – is there any chance there's been a change in the priority with a fix on the way?

As it stands (on the Enterprise plan) users can't scroll in the header, nor can they scroll horizontally in pinned columns – both of which are expected behaviors in Google Sheets / Excel etc. It's blocking further Enterprise adoption for us, so would love to hear if there's any officially supported workaround or ETA.

[AG-Zoheil]

Hi @simonkubica,

Thank you for your comment.

Two functionalities seem to be requested in this GitHub thread. One is the ability to scroll when in column headers (AG-2065) and one is in relation to your last comment which is the ability to scroll when columns/rows are pinned. For this latter requirement I have now added a feature request.

We have added this requirement to our backlog and we are tracking it with the following reference: AG-11874

We have no timeline for this at the moment, but this can still be picked up by our team when they're making modifications to this functional area of AG Grid. Please use the functionality currently provided by AG Grid until this is delivered at a later point.

See whether this item will be in the next release by checking the NEXT RELEASE checkbox on the product pipeline page: https://www.ag-grid.com/ag-grid-pipeline/

The best way to track this is to sign up for AG Grid new release notifications using the instructions here. This way you'll know as soon as a new version is out and you can check whether this specific item was implemented on the changelog page.

Thanks again for bringing this up with us.

Kind regards, Zoheil

[iaculch]

Similar to @shreyansqt's solution, I was able to fix with a useEffect hook in the React component which renders the grid:

useEffect(() => {
  let handler = (e: WheelEvent) => {}
  let headerContainer: Element
  if (store.ready) { // Use onGridReady to set this
    const verticalScrollingContainer = document.getElementsByClassName('ag-body-viewport')[0]
    const horizontalScrollingContainer =
      document.getElementsByClassName('ag-center-cols-viewport')[0]
    headerContainer = document.getElementsByClassName('ag-header-container')[0]
    handler = (e) => {
      e.preventDefault()
      // Check delta and only scroll in direction of bigger delta
      if (Math.abs(e.deltaX) > Math.abs(e.deltaY)) {
        horizontalScrollingContainer.scrollLeft =
          horizontalScrollingContainer.scrollLeft + e.deltaX
      } else {
        verticalScrollingContainer.scrollTop = verticalScrollingContainer.scrollTop + e.deltaY
      }
    }
    headerContainer?.addEventListener('mousewheel', handler)
  }

  return () => {
    headerContainer?.removeEventListener('mousewheel', handler)
  }
}, [store.ready])

[kwesterfeld2]

It is kind of nuts that this issue is closed, and the reference to open jira AG-2065 has nothing to do with this jira (Ag grid disabling cells using columns configuration), and it would seem to be one of the most obvious things you would fix in a grid.

For those of us doing vuejs, options api port of the workaround is here:

    // Adapted to allow side-scrolling when mouse is over the header from https://github.com/ag-grid/ag-grid/issues/2634
    this.$nextTick(() => {
      const headerViewport = this.$el.querySelector('.ag-header-viewport')
      if (!!headerViewport) {
        headerViewport.addEventListener('wheel', (e) => {
          e.preventDefault()
          const left = headerViewport.scrollLeft + e.deltaX
          const viewport = this.$el.querySelector('[ref="eViewport"]')
          if (!!viewport)
            viewport.scrollLeft = left
        })
      }
    })

Leaving the options api example as an exercise for the reader.

[kiril-matev]

Hi all,

Thanks for using AG Grid.

This horizontal scrolling feature (AG-2065) was implemented in AG Grid v32.1 and is now default behavior.

Please upgrade to AG Grid v32.1 or later to use this as built-in functionality, so you can remove the user code you've used to implement this so far.