Rollist class

Type:

• number

Properties:

Type:

• string

Example

console.log(exontrol.Rollist.type); // logs "Rollist"

Type:

• string

Example

console.log(exontrol.Rollist.version); // displays the version of the control, for instance "5.2"

Type:

• string

Example

null {null}, indicates the control's default allowActions value
"" {string}, specifies that no operation is allowed once the user clicks or touches the control
"scroll" {string}, specifies that only "scroll" operation is allowed, no matter of the event's button or modifier-keys is pressed.

Type:

• Rollist.AllowFilterInputEnum

Example

null {null} or "hide" {string} or exontrol.Rollist.AllowFilterInputEnum.exHide {AllowFilterInputEnum} or 0 {number}, no filter input is visible (by default)
"always" {string} or exontrol.Rollist.AllowFilterInputEnum.exAlwaysVisible {AllowFilterInputEnum} or 1 {number}, indicates that the filter input is always visible
"key,disable" {string} or (exontrol.Rollist.AllowFilterInputEnum.exShowOnAnyKey | exontrol.Rollist.AllowFilterInputEnum.exDisableHighlightOccurences) {AllowFilterInputEnum} or 0x12 {number}, shows the filter input when the user presses any key and disables the highlighting of all occurrences of the typed text in the items

Type:

• boolean

Example

true {boolean}, the items are displayed in a continuous loop
false {boolean}, the items are not displayed in a continuous loop (by default)

Type:

• any

Example

"data.txt" {string}, imports data from data.txt file, using separators defined in ImportOptions type
["German", "English", "French"] {array}, imports data from the array
function(){return Array.from(list.children).map(function(oLI) {return oLI.outerHTML;})}() {array}, imports all <li> child elements contained within the <ul> HTML element with the id "list"

Type:

• string

Example

null {null} or "" {string}, clear the filter (if applied)
"icon" {string}, filters the items to display only those that contain the word 'icon'

Type:

• Items

Example

The following statements are equivalents:

 oRollist.GetItems() {Items}, returns the control's items
 oRollist.Items {Items}, returns the control's items

where oRollist is an object of Rollist type

Type:

• exontrol.Lts

Example

The following sample shows how you can get all items the component currently supports:

oRollist.Listeners.forEach(function(name)
{
 console.log(name);
});

The following samples handle the "onload" event:

oRollist.Listeners.Add("onload", function (oEvent)
{
 console.log(oEvent);
});

or

oRollist.on("load", function (oEvent)
{
 console.log(oEvent);
});

where oRollist is an object of Rollist type

Type:

• MiscellaneousOptions

Example

{hAlign: 1} {object}, changes the horizontal alignment of the items to center-alignment
{selectPos: 0.5} {object}, changes the position of the selected item to the middle of the elliptic path (instead of the default position, which is at the beginning of the elliptic path)
{gradualOpacity: "1 - 0.25"} {object}, applies gradual opacity transition for items

Type:

• Rollist.Options

Example

{allowActions: "scroll", wheelChange: 5} {object}, changes the actions and the weel change for the control
{imageAlign: 1, imageSize: 24} {object}, changes the alignment and the size for all images within the control

Type:

• Item

Example

0 {number}, selects the first item in the Items collection
"itemId" {string}, selects the item with the identifier/key "itemId"

Type:

• number

Example

0 {number}, no smooth changes once the control goes from a layout to another
125 {number}, specifies that a smooth-transition is performed from a layout to another for 125 ms.

Type:

• number

Example

0 {number}, locks any action the mouse's wheel performs
18 {number}, scrolls the control by 18-pixels when mouse's wheel is rotated (CTRL + wheel scrolls horizontally)

Example

oRollist.BeginUpdate();
  // performs multiple changes to the control
oRollist.EndUpdate();

Example

oRollist.CloseFilterInput(), hides the filter input field and clears any applied filter, showing all items again

Example

oRollist.BeginUpdate();
 // performs multiple changes to the control
oRollist.EndUpdate();

Parameters:

Example

Import("data.csv"), imports data from the "data.csv" file located on the same server as the webpage
Import("German\nEnglish\nFrench", {format: "CSV", eor: "\n"}), imports data from a CSV string with newline as the end-of-row delimiter
Import(["German", "English", "French"]), imports data from an array of strings

Parameters:

Returns:

Type

Item

Example

The following statements are equivalent:

 oRollist.feI(function(oItem, index)
 {
   console.log(exontrol.ToString.Quote(oItem));
 })

or

 for (var i = 0, l = oRollist.Count; i < l; i++)
   console.log(oRollist.Item(i));

where oRollist is an object of Rollist type.

Parameters:

Since:

• 5.4

Returns:

Type

Item

Example

The following statements are equivalent:

 oRollist.ItemByPos(0) {Item}, returns the first item by its position in the Items collection
 oRollist.ItemByPos(1) {Item}, returns the second item by its position in the Items collection

where oRollist is an object of Rollist type.

Example

oRollist.Refresh(), refreshes the control

Example

oRollist.ShowFilterInput(), displays the filter input field, allowing the user to type keywords for filtering items

Parameters:

Example

oRollist.Update(function()
{
 // performs multiple changes to the control
});

Parameters:

Example

The following statements are equivalent:

 oRollist.feI(function(oItem, index)
 {
   console.log(exontrol.ToString.Quote(oItem));
 })

or

 for (var i = 0, l = oRollist.Count; i < l; i++)
   console.log(oRollist.Item(i));

where oRollist is an object of Rollist type.

Parameters:

Returns:

Type

any

Parameters:

Since:

• 4.4

Example

The following example removes the load event handler from the control:

oRollist.off("load");

where oRollist is an object of Rollist type.

This sample is equivalent to:

oRollist.Listeners.Remove("onload");

The following example removes all event handlers from the control:

oRollist.off();

where oRollist is an object of Rollist type.

This sample is equivalent to:

oRollist.Listeners.Clear();

or

oRollist.Listeners.Remove();

Parameters:

Since:

• 4.4

Returns:

Type

object

Example

The following sample shows how you can handle the onload event:

oRollist.on("load", function()
{
  console.log("onload event occured");
});

where oRollist is an object of Rollist type.

This sample is quivalent of 

oRollist.Listeners.Add("onload", function ()
{
  console.log("onload event occured");
});

Parameters:

Example

The following samples display the item being added:

oRollist.onadditem = function (oItem)
{
 console.log(oItem);
}

or

oRollist.Listeners.Add("onadditem", function (oItem)
{
 console.log(oItem);
})

or

oRollist.on("additem", function (oItem)
{
 console.log(oItem);
})

where oRollist is an object of Rollist type

Parameters:

Example

The following samples show how you can handle the "click" event:

oRollist.Listeners.Add("onclick", function (oEvent)
{
 console.log(oEvent);
})

or

oRollist.on("click", function (oEvent)
{
 console.log(oEvent);
})

or

oRollist.onclick = function (oEvent)
{
 console.log(oEvent);
}

where oRollist is an object of Rollist type.

Parameters:

Example

The following samples sets the HTML element's tooltip:

oRollist.oncreate = function (oEvent)
{
 oEvent.html.title = oEvent.html.innerText;
}

or

oRollist.Listeners.Add("oncreate", function (oEvent)
{
 oEvent.html.title = oEvent.html.innerText;
})

or

oRollist.on("create", function (oEvent)
{
 oEvent.html.title = oEvent.html.innerText;
})

where oRollist is an object of Rollist type

Parameters:

Example

The following samples displays the element being destroyed:

oRollist.ondestroy = function (oEvent)
{
 console.log(oEvent);
}

or

oRollist.Listeners.Add("ondestroy", function (oEvent)
{
 console.log(oEvent);
})

or

oRollist.on("destroy", function (oEvent)
{
 console.log(oEvent);
})

where oRollist is an object of Rollist type

Parameters:

Example

The following samples display the error once it occurs:

oRollist.onerror = function (oEvent)
{
 console.log(oEvent);
}

or

oRollist.Listeners.Add("onerror", function (oEvent)
{
 console.log(oEvent);
})

or

oRollist.on("error", function (oEvent)
{
 console.log(oEvent);
})

where oRollist is an object of Rollist type

Parameters:

Example

The following samples displays the current filter once the user changes it:

oRollist.Listeners.Add("onfilter", function (oEvent)
{
 console.log(oEvent);
})

or

oRollist.on("filter", function (oEvent)
{
 console.log(oEvent);
})

or

oRollist.onfilter = function (oEvent)
{
 console.log(oEvent);
}

where oRollist is an object of Rollist type.

Example

The following samples display a message once the control loads or imports new data (for instance, the user drags and drops a file into the control):

oRollist.onload = function ()
{
 alert("onload");
}

or

oRollist.Listeners.Add("onload", function ()
{
 alert("onload");
})

or

oRollist.on("load", function ()
{
 alert("onload");
})

where oRollist is an object of Rollist type

Parameters:

Example

The following samples display the item being removed:

oRollist.onremoveitem = function (oItem)
{
 console.log(oItem);
}

or

oRollist.Listeners.Add("onremoveitem", function (oItem)
{
 console.log(oItem);
})

or

oRollist.on("removeitem", function (oItem)
{
 console.log(oItem);
})

where oRollist is an object of Rollist type

Parameters:

Example

The following samples show how you can handle the "select" event:

oRollist.Listeners.Add("onselect", function (oEvent)
{
 console.log(oEvent);
})

or

oRollist.on("select", function (oEvent)
{
 console.log(oEvent);
})

or

oRollist.onselect = function (oEvent)
{
 console.log(oEvent);
}

where oRollist is an object of Rollist type.