ScrollView Configuration

An object defining configuration options for the dxScrollView widget.

direction

A string value specifying the available scrolling directions.

Type: String
Default Value: "vertical"
Accepted Values: 'vertical'|'horizontal'|'both'

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { direction: scrollingDirection }">
  <div id="textContainer"></div>
</div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Direction</div>
    <div class="dx-field-value" data-bind="dxLookup: { dataSource: directions, value: scrollingDirection }"></div>
  </div>
</div>
//Available directions
directions = [
  "vertical",
  "horizontal",
  "both"
];

scrollingDirection = ko.observable(directions[0]);

//Loads the scroll view content
$.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%;
}
.dx-scrollable-content{
    width: 200%;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

disabled

A Boolean value specifying whether or not the widget can respond to user interaction.

Type: Boolean
Default Value: false

Create an observable variable and assign it to this option to specify the availability of the widget at runtime.

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { disabled: scrollViewDisabled }">
  <div id="textContainer"></div>
</div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Disabled</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: scrollViewDisabled }"></div>
  </div>
</div>
scrollViewDisabled = ko.observable(false);

//Loads the scroll view content
$.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>");
        });
    }
});
body{
  text-align: center;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

pullDownAction

An action performed after the widget is scrolled to the top and pulled down.

Type: Action
Default Value: null

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { pullDownAction: pullDownActionFunction }">
  <div id="textContainer"></div>
</div><br/>
//Shows the "pulled down" notification and releases the scroll view
pullDownActionFunction = function (actionOptions) {
  DevExpress.ui.dialog.alert("The widget has been pulled down", "Action executed");
  actionOptions.component.release();
};

//Loads the scroll view content
$.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>");
        });
    }
});
body{
  text-align: center;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

pulledDownText

Specifies the text shown in the pullDown panel when pulling the content down lowers the refresh threshold.

Type: String
Default Value: "Release to refresh..."

pullingDownText

Specifies the text shown in the pullDown panel while pulling the content down to the refresh threshold.

Type: String
Default Value: "Pull down to refresh..."

reachBottomAction

An action performed after the widget is scrolled to the bottom and pulled up.

Type: Action
Default Value: null

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { reachBottomAction: reachBottomActionFunction }">
  <div id="textContainer"></div>
</div><br/>
//Shows the "bottom reached" notification and releases the scroll view
reachBottomActionFunction = function (actionOptions) {
  DevExpress.ui.dialog.alert("You have reached the widget bottom", "Action executed");
  actionOptions.component.release();
};

//Loads the scroll view content
$.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>");
        });
    }
});
body{
  text-align: center;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

reachBottomText

Specifies the text shown in the pullDown panel displayed when content is scrolled to the bottom.

Type: String
Default Value: "Loading..."

refreshingText

Specifies the text shown in the pullDown panel displayed when the content is being refreshed.

Type: String
Default Value: "Refreshing..."

scrollAction

An action performed on each scroll gesture.

Type: Action
Default Value: null

The function passed to this configuration option can take on an object containing the following fields as an argument.

  • scrollOffset - an object containing top and left properties, which specify the current position of the scrolled content against the initial position;
  • reachedLeft - indicates whether the scrolled content is in the leftmost position or not;
  • reachedRight - indicates whether the scrolled content is in the rightmost position or not;
  • reachedTop - indicates whether the scrolled content is in the topmost position or not;
  • reachedBottom - indicates whether the scrolled content is in the bottommost position or not.
Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { scrollAction: scrollActionFunction }">
  <div id="textContainer"></div>
</div><br/>
//Shows the "start scrolling" notification
scrollActionFunction = function () {
  DevExpress.ui.dialog.alert("Scrolling has been started", "Action executed");
};

//Loads the scroll view content
$.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>");
        });
    }
});
body{
  text-align: center;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

showScrollBar

A Boolean value specifying whether or not the scrollbar is visible.

Type: Boolean
Default Value: true

Show Example:
jQuery
<div id="scrollView" data-bind="dxScrollView: { showScrollbar: scrollbarVisible }">
  <div id="textContainer"></div>
</div><br/>
<div class="dx-fieldset">
  <div class="dx-field">
    <div style="width: 70%" class="dx-field-label">Show scroll bar</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: scrollbarVisible }"></div>
  </div>
</div>
scrollbarVisible = ko.observable(true);

//Loads the scroll view content
$.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>");
        });
    }
});
body{
  text-align: center;
}
#scrollView{
  margin: 10px;
  height: 70%;
}

updateAction

An action performed after the widget is updated.

Type: Action
Default Value: null

The function passed to this configuration option can take on an object containing the following fields as an argument.

  • scrollOffset - an object containing top and left properties, which specify the current position of the scrolled content against the initial position
  • reachedLeft - indicates whether the scrolled content is in the leftmost position or not
  • reachedRight - indicates whether the scrolled content is in the rightmost position or not
  • reachedTop - indicates whether the scrolled content is in the topmost position or not
  • reachedBottom - indicates whether the scrolled content is in the bottommost position or not
Show Example:
jQuery
<div class="button" data-bind="dxButton: { text: 'Resize scroll view', clickAction: resizeScrollView }"></div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Update</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: updateScrollView }"></div>
  </div>
</div>
<div id="scrollView" style="background-color:lightGray; color: black;" data-bind="dxScrollView: { updateAction: scrollViewUpdated }">
  <div id="textContainer"></div>
</div><br/>
updateScrollView = ko.observable(false);
scrollViewHeight = 30;

//Shows the "widget updated" notification
scrollViewUpdated = function () {
  DevExpress.ui.notify("Scroll view has been updated", "info", 500);
};

//Changes the scroll view height
resizeScrollView = function () {
  if (scrollViewHeight >= 70) {
    scrollViewHeight = 30;
    setTimeout(scrollToEnd, 500);
  }
  else
    scrollViewHeight += 10;
  $("#scrollView").css({ height: scrollViewHeight + '%' });
  if (updateScrollView())
    $("#scrollView").dxScrollView("instance").update(true);
};

//Scrolls the widget content to the bottom
scrollToEnd = function () {
  $("#scrollView").dxScrollView("instance").scrollTo($(".dx-scrollview-content").height() - $(".dx-scrollview").height(), true);
};

//Loads the scroll view content
$.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>");
        });
    }
});
setTimeout(scrollToEnd, 500);
body{
  text-align: center;
}
.button{
  margin:10px;
}
#scrollView{
  margin: 10px;
  height: 30%;
}

useNative

Indicates whether to use native or simulated scrolling.

Type: Boolean
Default Value: true
Default for android below version 4: false
Default for tizen: false