Vue ScrollView Props
An object defining configuration options for the ScrollView widget.
bounceEnabled
A Boolean value specifying whether to enable or disable the bounce-back effect.
If the option is set to true, you can scroll the widget content up (down) even if you have reached the bottom (top) boundary. But when you release the content, it returns to the bound position. If the option value is false, you can scroll the widget content until you reach the boundary.
direction
A string value specifying the available scrolling directions.
When using the widget as an ASP.NET MVC Control, specify this option using the ScrollDirection
enum. This enum accepts the following values: Vertical
, Horizontal
and Both
.
disabled
A Boolean value specifying whether or not the widget can respond to user interaction.
Create an observable variable and assign it to this option to specify the availability of the widget at runtime.
elementAttr
Specifies the attributes to be attached to the widget's root element.
You can configure this option in an ASP.NET MVC Control as follows:
@(Html.DevExtreme().WidgetName() .ElementAttr("class", "class-name") // ===== or ===== .ElementAttr(new { @id = "elementId", @class = "class-name" }) // ===== or ===== .ElementAttr(new Dictionary<string, object>() { { "id", "elementId" }, { "class", "class-name" } }) )
@(Html.DevExtreme().WidgetName() _ .ElementAttr("class", "class-name") ' ===== or ===== .ElementAttr(New With { .id = "elementId", .class = "class-name" }) ' ===== or ===== .ElementAttr(New Dictionary(Of String, Object) From { { "id", "elementId" }, { "class", "class-name" } }) )
height
Specifies the widget's height.
This option accepts a value of one of the following types:
Number
The height in pixels.String
A CSS-accepted measurement of height. For example,"55px"
,"80%"
,"auto"
,"inherit"
.Function
A function returning either of the above. For example:JavaScriptheight: function() { return window.innerHeight / 1.5; }
onDisposing
A handler for the disposing event. Executed when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if you use Knockout. |
onInitialized
A handler for the initialized event. Executed only once, after the widget is initialized.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
You cannot access widget elements in this handler because it is executed before they are ready.
onOptionChanged
A handler for the optionChanged event. Executed after an option of the widget is changed.
Information about the event.
Name | Type | Description |
---|---|---|
name |
The option's short name. |
|
model |
The model data. Available only if you use Knockout. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The widget's instance. |
|
fullName |
The option's full name. |
|
value | any |
The option's new value. |
onPullDown
A handler for the pullDown event.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
Assign a function to perform a custom action after the widget is scrolled to the top and pulled down.
The function passed to this option should contain a call to the release() method, which releases the scroll view.
var scrollViewOptions = { onPullDown: function(options){ . . . options.component.release(); } }
onReachBottom
A handler for the reachBottom event.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
Assign a function to perform a custom action after the widget is scrolled to the bottom and pulled up.
The function passed to this option should contain a call to the release() method, which releases the scroll view.
var scrollViewOptions = { onReachBottom: function(options){ . . . options.component.release(); } }
onScroll
A handler for the scroll event.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
|
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
event | Event (jQuery or EventObject) |
The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. |
scrollOffset |
The current scroll offset in the following format: { top: topOffset, left: leftOffset }. |
|
reachedLeft |
Indicates whether the container's left boundary is reached. |
|
reachedRight |
Indicates whether the container's right boundary is reached. |
|
reachedTop |
Indicates whether the container's top boundary is reached. |
|
reachedBottom |
Indicates whether the container's bottom boundary is reached. |
Assign a function to perform a custom action on each scroll gesture.
onUpdated
A handler for the update event.
Information about the event.
Name | Type | Description |
---|---|---|
component |
The widget's instance. |
|
element |
The widget's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
model |
The model data. Available only if Knockout is used. |
|
jQueryEvent |
Use 'event' instead. The jQuery event that caused the handler execution. Deprecated in favor of the event field. |
|
event | Event (jQuery or EventObject) |
The event that caused the handler execution. It is a dxEvent or a jQuery.Event when you use jQuery. |
scrollOffset |
The current scroll offset in the following format: { top: topOffset, left: leftOffset }. |
|
reachedLeft |
Indicates whether the container's left boundary is reached. |
|
reachedRight |
Indicates whether the container's right boundary is reached. |
|
reachedTop |
Indicates whether the container's top boundary is reached. |
|
reachedBottom |
Indicates whether the container's bottom boundary is reached. |
Assign a function to perform a custom action after the widget is updated.
pulledDownText
Specifies the text shown in the pullDown panel when pulling the content down lowers the refresh threshold.
pullingDownText
Specifies the text shown in the pullDown panel while pulling the content down to the refresh threshold.
reachBottomText
Specifies the text shown in the pullDown panel displayed when content is scrolled to the bottom.
refreshingText
Specifies the text shown in the pullDown panel displayed when the content is being refreshed.
rtlEnabled
Switches the widget to a right-to-left representation.
When this option is set to true, the widget text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.
DevExpress.config({ rtlEnabled: true });
See Also
- Right-to-Left Support Demo: DataGrid | Navigation Widgets | Editors
scrollByContent
A Boolean value specifying whether or not an end-user can scroll the widget content swiping it up or down. Applies only if useNative is false
scrollByThumb
A Boolean value specifying whether or not an end-user can scroll the widget content using the scrollbar.
showScrollbar
Specifies when the widget shows the scrollbar.
Setting this option makes sense only when the useNative option is set to false.
When using the widget as an ASP.NET MVC Control, specify this option using the ShowScrollbarMode
enum. This enum accepts the following values: OnScroll
, OnHover
, Always
and Never
.
useNative
Indicates whether to use native or simulated scrolling.
width
Specifies the widget's width.
This option accepts a value of one of the following types:
Number
The width in pixels.String
A CSS-accepted measurement of width. For example,"55px"
,"80%"
,"auto"
,"inherit"
.Function
A function returning either of the above. For example:JavaScriptwidth: function() { return window.innerWidth / 1.5; }
If you have technical questions, please create a support ticket in the DevExpress Support Center.