DevExtreme React - Touch-Screen Gestures

The List supports the following touch-screen gestures.

  • Swipe
    Swipe can be used to delete an item or access the commands of the context menu. Performing this gesture raises the itemSwipe event. To handle it, assign a function to the onItemSwipe option, or subscribe to this event using the on(eventName, eventHandler) method.

    jQuery
    JavaScript
    $(function() {
    $("#listContainer").dxList({
        // ...
        onItemSwipe: function(e) {
            // Event handling commands go here
        }
    });
});

    JavaScript
    var itemSwipeEventHandler1 = function(e) {
    // First handler of the "itemSwipe" event
}
var itemSwipeEventHandler2 = function(e) {
    // Second handler of the "itemSwipe" event
}
$("#listContainer").dxList("instance")
    .on("itemSwipe", itemSwipeEventHandler1)
    .on("itemSwipe", itemSwipeEventHandler2)
    Angular
    HTML
    TypeScript
    <dx-list ...
    (onItemSwipe)="onItemSwipe($event)">
</dx-list>
    import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    onItemSwipe (e) {
        // Event handling commands go here
    }
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

  • Long Tap
    Long tap can be used to access the commands of the context menu. Performing this gesture raises the itemHold event. To handle it, assign a function to the onItemHold option, or subscribe to this event using the on(eventName, eventHandler) method just like it is demonstrated for the swipe gesture earlier on.

    You can also specify the time period the widget should wait before raising the itemHold event. For this purpose, change the itemHoldTimeout option.

    jQuery
    JavaScript
    $(function() {
    $("#listContainer").dxList({
        // ...
        itemHoldTimeout: 1000 // the widget will wait one second before raising the "itemHold" event 
    });
});
    Angular
    HTML
    TypeScript
    <dx-list ...
    [itemHoldTimeout]="1000"> <!-- the widget will wait one second before raising the "itemHold" event -->
</dx-list>
    import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

  • Pull Down to Refresh
    This gesture refreshes data in the List. To enable it, assign true to the pullRefreshEnabled option.

    jQuery
    JavaScript
    $(function() {
    $("#listContainer").dxList({
        // ...
        pullRefreshEnabled: true
    });
});
    Angular
    HTML
    TypeScript
    <dx-list ...
    [pullRefreshEnabled]="true">  
</dx-list>
    import { DxListModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxListModule
    ],
    // ...
})

    Performing this gesture raises the pullRefresh event. To handle it, assign a function to the onPullRefresh option, or subscribe to this event using the on(eventName, eventHandler) method just like it is demonstrated for the swipe gesture earlier on.

See Also