jQuery List - 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 property, 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

  const itemSwipeEventHandler1 = function(e) {
      // First handler of the "itemSwipe" event
  }
  const 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
      ],
      // ...
  })

  Vue

  App.vue

  <template>
      <DxList ...
          @item-swipe="onItemSwipe"
      />
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.light.css';
  import DxList from 'devextreme-vue/list';
  
  export default {
      components: {
          DxList
      },
      // ...
      methods: {
          onItemSwipe (e) {
              // Event handling commands go here
          }
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  import 'devextreme/dist/css/dx.light.css';
  import List from 'devextreme-react/list';
  
  const onItemSwipe = (e) => {
      // Event handling commands go here
  };
  
  export default function App() {
      return (
          <List ... 
              onItemSwipe={onItemSwipe}
          />
      );
  }

• 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 property, 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 UI component should wait before raising the itemHold event. For this purpose, change the itemHoldTimeout property.

  jQuery

  JavaScript

  $(function() {
      $("#listContainer").dxList({
          // ...
          itemHoldTimeout: 1000 // wait one second before raising the "itemHold" event 
      });
  });

  Angular

  HTML

  TypeScript

  <dx-list ...
      [itemHoldTimeout]="1000"> <!-- wait one second before raising the "itemHold" event  -->
  </dx-list>

  import { DxListModule } from "devextreme-angular";
  // ...
  export class AppComponent {
      // ...
  }
  @NgModule({
      imports: [
          // ...
          DxListModule
      ],
      // ...
  })

  Vue

  App.vue

  <template>
      <DxList ...
          :item-hold-timeout="1000"> <!-- wait one second before raising the "itemHold" event  -->
      </DxList>
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.light.css';
  import DxList from 'devextreme-vue/list';
  
  export default {
      components: {
          DxList
      },
      // ...
  }
  </script>

  React

  App.js

  import React from 'react';
  import 'devextreme/dist/css/dx.light.css';
  import List from 'devextreme-react/list';
  
  export default function App() {
      return (
          <List ... 
              itemHoldTimeout={1000}> {/* wait one second before raising the "itemHold" event */}
          </List>
      );
  }

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

  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
      ],
      // ...
  })

  Vue

  App.vue

  <template>
      <DxList ...
          :pull-refresh-enabled="true"
      />
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.light.css';
  import DxList from 'devextreme-vue/list';
  
  export default {
      components: {
          DxList
      },
      // ...
  }
  </script>

  React

  App.js

  import React from 'react';
  import 'devextreme/dist/css/dx.light.css';
  import List from 'devextreme-react/list';
  
  export default function App() {
      return (
          <List ... 
              pullRefreshEnabled={true}
          />
      );
  }

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

See Also

• List - End-User Interaction | Universal Actions
• List - Localization
• List Demos
• List API Reference