Upvote 2

Is there a way to scroll to a specific item in a data grid

Answered eggroll 6 years ago

For example, if my data grid is a list of names, last name first, and above the data grid I have the alphabet, with each letter having a hotspot, I would like to scroll the data grid to the first person in the list whose last name begins with the letter I clicked on. So, I click on "M", it goes to the first person whose last name starts with "M". I need it to be a scroll, not a filter for last names that start with "M".


Replies (2)

Hi there,

There are a few ways you could do this. You could drag a widget (which you'll mark as hidden) to where the 'M' data will be within the data list, and then create a 'scroll to' event that will scroll to that widget. You could also paginate the data grid, with each page representing a different letter of the alphabet.

Hope this helps.




Hi, Danielle. Thanks for the response. So far, we have been unable to get it to work.

Here is how we have things set up in our iPhone 7 mobile app prototype. We have a data master that contains all of the contacts, pre-sorted alphabetically. Within the data master, at the beginning of each group of contacts that start with the same letter, we have added an extra record with the last name field containing only the first letter of the last names of that group, with all other fields left blank. These extra records create a space within the data grid for us to overlay headers at the beginning of each group that indicate the last name letter for the group, visually separating each group as is typical in a contacts list/directory. Within the screen prototype, the data master is displayed in a data grid within a dynamic panel. The headers described above have been created and, before page load, are all positioned at left-0, top-0 inside of the dynamic panel.

Upon page load, all of the headers are moved to their appropriate positions, overlaying the extra records in the data master mentioned above according to their respective letters of the alphabet. These headers function as the scroll to widgets you describe in your response, just not hidden as you suggest because we are using them visually. And all of this is working properly.

Below and outside of the dynamic panel, we have the letters A thru Z with each letter overlaid with a hotspot. Each hotspot has an "On tap - Scroll to" event set to scroll to the appropriate header in the dynamic panel containing the same letter as tapped. The problem is, when a letter is tapped, nothing happens. No scrolling, at least not when in the initial state after page load of being at the beginning of the contacts list.

There is, however, an odd behavior that occurs if, before you click on any of the letter hotspots, you swipe to scroll down in the contacts list and are no longer at the initial position at the beginning of the contacts list. In this instance, when you click on any of the hotspot letters, whether the letter is associated with a group of contacts that is above or below where you have swipe scrolled to, it takes you to the top of the list. No idea why, though. It tells us that at least a tap on hotspot is being registered, it's just not triggering the desired behavior.

So, not sure what the solution is. Do the hotspots need to be contained within the dynamic panel in order to trigger scrolling of the dynamic panel? It seems if that were the case, you wouldn't be given the option to associate a header widget inside the dynamic panel with an event attached to a hotspot outside of the dynamic panel. It appears as though, logically, everything is set up correctly, so we could use some guidance on how to proceed.




Leave a Comment
Attach a file