Alphabetical scrollbar in dojo mobile

Question

is it possible to implement an alphabetical scroll bar for a very long list, like the example in link below, in dojox mobile?

Answer 1

It should be possible to implement it using the following available building blocks:

• Horizontal alphabetic separators in the list: can be implemented as category headers using the "header" parameter of ListItem (doc).
• SearchBox (1.8+, doc): a widget for entering the search criteria (as the one on the top of your screenshot).
• FilteredListMixin (1.9+; doc, live sample): combines and connects list widgets with SearchBox
• LongListMixin (1.9+, doc, live sample): highly improves the scrolling performance for long lists.
• The list widget can optionally be backed by a dojo/store (doc) using EdgeToEdgeStoreList (doc, live sample).
• The vertical alphabetic index (on the right-side of your screenshot): you would need to implement it, say as a container overlaying the list and with transparent fill color (on phones), or on its right side (on tablets), and using for instance ToolBarButton (doc) for each letter. The action of the button-letter would rely on scrollable.scrollIntoView(listItem) (doc) for implementing the automatic scroll when the user touches a given letter.

Hope this helps, Adrian

Answer 2

There is no easy way to customize the scrollbar of a ScrollableView, to do that you would have to override and modify the showScrollBar method (and more specifically its createbar internal function) defined in dojox/mobile/scrollable.js.