• _Building Disconnected Applications
• Alphabet Button Search
• Cascading Lists - Delay Render
• Computed Columns
• Converting Static Data into SQL Data
• Copying List Layouts
• Creating Kanban Layouts
• Decoded values
• Detail View - Events to Transform Data Before Display and Save
• Dialing a Phone Number Shown in a List
• Disconnected Data Entry - Preventing Duplicate Records when Connectivity is Lost
• Displaying Google Maps in List Rows
• Embedding Detail Views and Lists into a List
• Fixed and Virtual Columns
• Freeform Layout - Hyperlinks
• Geography Searches
• In place editing
• Introducing the List Builder
• Lazy image loading
• List Charts
• List Column Actions
• List column separators
• New Records and Default Values in the Detail View
• Refresh and Filter Operations - User Defined Ajax Callbacks
• SQL Data Source - Group By in SQL - Filter List
• Synchronization using Batches
• Template Items - a5-item Attribute
• Templates - Date Formatting
• Two State Static Images
• Using a Icon to Indicate Selected Rows in a Multi-select List Control
• Using a Slider Control to Scroll a List
• Using Argument Arrays in SQL Queries
• UX Component 'Dirty State'
• Virtual Javascript

Using a Slider Control to Scroll a List

Description

Say you have a List control and you want to put a Slider control under the List to scroll the List. Assume that the name of the Slider control is 'Slider1'.

1. Put this code in the List's AfterRenderComplete event

   var s = {dialog.object}.getControl('Slider1');
   var l = {dialog.object}.getControl('{dialog.listId}');
   s.min = 0;
   s.max = (l._data.length -1);
   s.refresh();

   This code sets the min/max values on the slider to match the row count of the List.

2. Put this code in the Slider control's onSlide event:

   var l = {dialog.object}.getControl('LIST1');
   //the value of the slider while it is being dragged is in arguments[0].value
   var val = arguments[0].value
   l.scrollToItem(val);