0

I have a ui grid that has 20 columns, and I would like to be able to tell what the next column will be as I scroll through the horizontal axis so that I can have some text that will tell the users what the names of all the columns they can't see are.

Anyone know if this is possible? As I watch the the inspector and scroll through the columns, I see html attributes changing.

---UPDATE 1---- This is what is all looks like (where it says "home #" is dynamic and will change to show the next column that is out of site) enter image description here

IWI
  • 1,528
  • 4
  • 27
  • 47
  • 1
    Where do you want to show this to the user? – Tome Pejoski Dec 30 '16 at 09:38
  • outside of the grid, I have some text with an arrow "Home Phone ->" which shows the user the next column (that is beyond the view), so when the scroll horizontally, that is the next column they will see – IWI Dec 30 '16 at 13:04

1 Answers1

0

Based on the ui-grid configuration that you use to render the grid, you already know the order of the columns. You can use this information together with the visible on each column added by the gird itself.

What you need to do is bind a event handler on scroll to iterate over the columns on each change and check the visibility of them. Then the first one with visible === false is the upcoming.

Here is a working Plunker where is used this flag.

Tome Pejoski
  • 1,582
  • 2
  • 10
  • 34