The Scrollable Drop Down List Object

Scrollable drop down list is a data bound component used to view a list of data. It takes XML data as an input.

var sddlSample = new TScrollableDropdownList(5, 'GetList.php', null, false);
var wndScrollDropDownSample = createWindow('Scrollable Dropdown List Sample');

var refresh = function() {
    wndScrollDropDownSample.refresh();
};

sddlSample.setAuxiliaryParameters("<CategoryId>1</CategoryId>");
sddlSample.setSelectedFirst();
sddlSample.update(refresh);

wndScrollDropDownSample.add(sddlSample);
wndScrollDropDownSample.add(new TVerticalDelimiter(100));
showModal(wndScrollDropDownSample);

Scrollable drop down list object constructor takes four parameters:

new TScrollableDropdownList(numberOfVisibleItems, url, parent, autoUpdate);

Where:

Data Structure

Data returned from the server must have specific structure, so the scrollable drop down list object can read it.

Data Structure From Server:

<Root>
   <Item>
     <Id>Record id</Id>
     <Value>Item value</Value>
   </Item>
   .
   .
   .
</Root>

Data sent to the server have specific structure also. It contains data you may use at your server script. These data is sent by media list automatically, so you do not need to do anything here.

Data Structure To Server:

<Vtf>
    <SessionId>This tag will be passed only if you define g_sessionId variable</SessionId>
    /*
       You may pass other tags here to use on the server. Use setAuxiliaryParameters property to do so.
    */
</Vtf>
Scrollable Drop Down List Methods and Properties
Method/Property Description
add Manually adds a list item to the scrollable drop down list. Form:
add(itemId, itemText)
clear Clears the scrollable drop down list from items
disable Disables the scrollable drop down list object
enable Enables the scrollable drop down list object
getNumberOfItems Gets the total number of items in the scrollable drop down list object
getSelectedId Gets selected item id from the list
getText Gets selected item text from the list
isDisabled Returns true if the list object is disables and false if not
setAuxiliaryParameters Sets addtional parameters that you want to pass to the server script which is called via update method. Example:
myList.setAuxiliaryParameters('<CategoryId>1</CategoryId>');
setOnChange Sets an event handler for the selected item changed event on the list. Form:
setOnChange(eventHandler)
setSelectedFirst Sets selected the first item in the list object
setSelectedId Sets selected the specified item by its id. Form:
setSelectedId(itemId)
setSelectedItem Sets selected the specified item by its text. Form:
setSelectedItem(itemText)
update Sends request to the server script to fetch data. Form:
update(updateCallback)
Where updateCallback will be called after the data gets from the server