UI Widgets ScrollView

A widget used to display scrollable content.

Type: Object

The dxScrollView widget represents a scrollable field that displays data located inside the HTML element representing the widget.

To create the dxScrollView widget, add a div element with dxScrollView Knockout binding within the body of the required view.

HTML
<div data-bind="dxScrollView:{pullDownAction: pulledDown, reachBottomAction: reachedBottom}">
    <p>The text that should be displayed by the widget.</p>
</div>

NOTE: By default, dxScrollView has a height that is 100% equivalent to that of the container. When you place this widget on your view, the view content becomes a container for your widget. This results in the stretching of the widget according to the view content height. This does not become an issue for widget content visualization. However, if the view has an extra element(s) in addition to the dxScrollView widget, the total height of the view content will be more than it is, because of the default height of the dxScrollView widget. This will lead to a problem with scrolling. To solve this, specify a height for the dxScrollView widget so that the total height of the view elements equals the view content height. Use any means you like for the solution (e.g., css rules, the height option, etc.).

The widget includes pullDownAction and reachBottomAction configuration options, which allow you to handle the appropriate events.

Declare functions that handle the pullDown and reachBottom events, and pass them to the appropriate configuration options.

JavaScript
var pulledDown = function(e){
    alert("The ScrollView pulled down");
};
var reachedBottom = function(e){
    alert("The ScrollView reached the bottom");
};

Refer to the Add a widget documentation section to learn how to create widgets in detail.

Show Example:
jQuery
<div id="scrollViewContainer" data-bind="dxScrollView: { }">
    <div id="textContainer"></div>
</div>
$.ajax({
    type: "POST",
    url: "/LoremService.asmx/LoremIpsum",
    data: JSON.stringify({ count: Math.ceil(Math.random() * 30) }),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (data) {
        $.each(data.d, function (index, value) {
            $("#textContainer").append("<p>" + value + "</p>");
        });
    }
});
p{
  padding: 5px 10px;
  margin: 0;
}
.content{
  height: 100%;
}

Configuration

An object defining configuration options for the dxScrollView widget.

Methods

This section describes the members used to manipulate the widget.

Events

This section describes events fired by this component.