ListBox.getScrollBox

Syntax

getScrollBox();

Description

The getScrollBox method returns the area of scrolling list of elements.

Example

Executing the example requires links to the PP.js scenario file and the PP.css styles file in the <body> tag of HTML page of the <div> element with the listBox identifier. In the onload event of the <body> tag the createListBox() function call must be specified. Add a list of elements on the page and implement handlers of the following events: ItemClick, ItemMouseDown, SelectableSelected, ItemEdited, ItemEditing:

function createListBox() {    
    // Create a list of elements
    listBox = new PP.Ui.ListBox({
        // Set parent element
        ParentNode: document.getElementById("listBox"),
        // Set whether list is scrolled to the selected element
        IsScrollToSelected: true,
        // Set whether elements can be edited
        EnableEdit: true,
        // Set whether elements are selected on mouse click
        SelectOnMouseDown: true,
        /* Set whether 
        empty set of elements can be selected */
        EmptySelection: true,
        // Set list width
        Width: 200,
        Height: 210,
        // Handle list element click event
        ItemClick: function(sender, args) {            
            console.log("Left mouse button clicked on element: " +
                args.Item.getContent());        
        },
        // Handle list element click event
        ItemMouseDown: function(sender, args) {            
            console.log("Mouse button clicked element: " +
                args.Item.getContent());        
        },
        // Handle list element click event
        SelectableSelected: function(sender, args) {            
            console.log("List element is clicked");        
        },
        // Handle list element edit end event
        ItemEdited: function(sender, args) {            
            console.log("Element contents: \"" + args.PrevValue +
                "\" is changed for \"" + args.NewValue + "\"");        
        },
        // Handle list element edit event
        ItemEditing: function(sender, args) {            
            console.log("Element with identifier is changed: " +
                args.Item.getId());        
        }    
    });
    // Fill list with elements
    listBox.beginUpdate();    
    for (var i = 1; i <= 50; i++) {        
        listBox.addItem({
            Content: "Item " + i,
            Id: "ListItem" + i
        });    
    }    
    listBox.endUpdate();
}

Output the content of the fifth element of the list to the console:

console.log("Content of the fifth element of the list: " + listBox.getLayoutItems()[4].getContent());

As a result the content of the fifth element is output to the browser console:

Content of the fifth element of the list: Element 5

Output width and height value of list scrolling to the console:

// Obtain sizes of scroll area
var scrollBox = listBox.getScrollBox();
console.log("Scroll area width: " + scrollBox.getWidth());
console.log("Scroll area height: " + scrollBox.getHeight());

Consequently the height and the width values of the scroll area will be output to the browser console:

Scroll area width: 200

Scroll area height: 850

Obtain identifier of 30 element and select it:

// Obtain identifier of 30 element of the list
var id = listBox.getItems()[29].getId();
// Select element with specified identifier
listBox.selectItemById(id);
// Set attribute of scrolling list to the selected element
listBox.setIsScrollToSelected(True);

Scroll list to selected element:

// Scroll list to the selected element
listBox.scrollToSelected();

As a result 30 element will be selected in the list:

Obtain content of selected element of the list:

// Obtain content of selected element
console.log("Content of selected element: " + listBox.getActiveItem().getContent());

As a result the content of the selected element is output to the browser console:

Content of selected element: Element 30

Set focus to the first element of the dictionary:

// Set focus on the first element of the dictionary
listBox.setSelectedFocus(0);

As a result focus will be set on 1 element:

Scroll list to 40 element:

// Obtain 40 element
var itemListBox = listBox.getItems()[39];
// Scroll list to 40 element
listBox.scrollToItem(itemListBox);

As a result the list will be scrolled to 40 element:

Click mouse button on the second element of the dictionary. As a result the following will be output to the console:

Mouse button is hold on the element: Element 2

After releasing mouse button to the console the following will be output:

Element of the list is selected

Left button of the mouse is clicked on the element: Element 2

Output content of the last selected element

// Output the content of the last selected element
var content = listBox.getLastItemClick() === undefined ? "Empty" : listBox.getLastItemClick().getContent();
console.log("Content of the last selected element: " + content);

As a result the following will be output to the console:

Content of the last selected element: Element 2

Double click the left button to the third element of the list and change its value to New Value. During changing the value the following will be output to the console:

The element with the following identifier is changed: ListItem167

After finishing change the following will be output to the console:

Element content: "Element 3" is changed to "New Value"

Clear list:

// Clear list
listBox.clear();

As a result all elements will be deleted.