JavaScript/jQuery Stepper Options

The value of this property will be passed to the accesskey attribute of the HTML element that underlies the UI component.

Use this property on platforms that require active state change for UI components. On such platforms, a component switches to the active state when a user presses the primary mouse button.

If the activeStateEnabled property is set to true, CSS rules for the active state apply. You can change these rules to customize the component.

Stepper works with collections of objects or string values.

Depending on your data source, bind Stepper to data as follows.

• Data Array
  Assign the array to the dataSource option.

• Read-Only Data in JSON Format
  Set the dataSource property to the URL of a JSON file or service that returns JSON data.

• OData
  Implement an ODataStore.

• Web API, PHP, MongoDB
  Use one of the following extensions to enable the server to process data according to the protocol DevExtreme UI components use:

  • DevExtreme.AspNet.Data
  • DevExtreme-PHP-Data
  • devextreme-query-mongodb

  Then, use the createStore method to configure access to the server on the client as shown below. This method is part of DevExtreme.AspNet.Data.

  jQuery

  JavaScript

  $(function() {
      let serviceUrl = "https://url/to/my/service";
      $("#stepperContainer").dxStepper({
          // ...
          dataSource: DevExpress.data.AspNet.createStore({
              key: "ID",
              loadUrl: serviceUrl + "/GetAction",
              insertUrl: serviceUrl + "/InsertAction",
              updateUrl: serviceUrl + "/UpdateAction",
              deleteUrl: serviceUrl + "/DeleteAction"
          })
      })
  });

  Angular

  app.component.ts

  app.component.html

  app.module.ts

  import { Component } from '@angular/core';
  import CustomStore from 'devextreme/data/custom_store';
  import { createStore } from 'devextreme-aspnet-data-nojquery';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      store: CustomStore;
      constructor() {
          let serviceUrl = "https://url/to/my/service";
          this.store = createStore({
              key: "ID",
              loadUrl: serviceUrl + "/GetAction",
              insertUrl: serviceUrl + "/InsertAction",
              updateUrl: serviceUrl + "/UpdateAction",
              deleteUrl: serviceUrl + "/DeleteAction"
          })
      }
  }

  <dx-stepper ...
      [dataSource]="store">
  </dx-stepper>

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  
  import { DxStepperModule } from 'devextreme-angular';
  
  @NgModule({
      declarations: [
          AppComponent
      ],
      imports: [
          BrowserModule,
          DxStepperModule
      ],
      providers: [],
      bootstrap: [AppComponent]
  })
  export class AppModule { }

  Vue

  App.vue

  <template> 
      <DxStepper ...
          :data-source="store" />
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.light.css';
  
  import CustomStore from 'devextreme/data/custom_store';
  import { createStore } from 'devextreme-aspnet-data-nojquery';
  import { DxStepper } from 'devextreme-vue/stepper';
  
  export default {
      components: {
          DxStepper
      },
      data() {
          const serviceUrl = "https://url/to/my/service";
          const store = createStore({
              key: "ID",
              loadUrl: serviceUrl + "/GetAction",
              insertUrl: serviceUrl + "/InsertAction",
              updateUrl: serviceUrl + "/UpdateAction",
              deleteUrl: serviceUrl + "/DeleteAction"
          });
          return {
              store
          }
      }
  }
  </script>

  React

  App.js

  import React from 'react';
  import 'devextreme/dist/css/dx.light.css';
  
  import CustomStore from 'devextreme/data/custom_store';
  import { createStore } from 'devextreme-aspnet-data-nojquery';
  import Stepper from 'devextreme-react/stepper';
  
  const serviceUrl = "https://url/to/my/service";
  const store = createStore({
      key: "ID",
      loadUrl: serviceUrl + "/GetAction",
      insertUrl: serviceUrl + "/InsertAction",
      updateUrl: serviceUrl + "/UpdateAction",
      deleteUrl: serviceUrl + "/DeleteAction"
  });
  
  class App extends React.Component {
      render() {
          return (
              <Stepper ...
                  dataSource={store} />
          );
      }
  }
  export default App;

• Any other data source
  Implement a CustomStore.

Regardless of the data source on the input, the Stepper always wraps it in the DataSource object. This object allows you to sort, filter, group, and perform other data shaping operations. To get its instance, call the getDataSource() method.

This property accepts a value of one of the following types:

• Number
  The height in pixels.

• String
  A CSS-accepted measurement of height. For example, "55px", "20vh", "80%", "inherit".

The items array can contain:

• Objects with fields described in this section.
• Objects with any other fields. In this case, specify the itemTemplate.

As an alternative to items, you can use the dataSource property. It accepts the DataSource object, whose underlying stores supply an API that allows you to update individual items without reassigning the entire item collection.

See Also

• Custom Templates

If this property is false, navigation is non-linear. In other words, users can skip steps.

View Demo

<dx-stepper ...
    (onInitialized)="saveInstance($event)">
</dx-stepper>

import { Component } from "@angular/core";
import Stepper from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    stepperInstance: Stepper;
    saveInstance (e) {
        this.stepperInstance = e.component;
    }
}

<template>
    <div>
        <DxStepper ...
            @initialized="saveInstance">
        </DxStepper>
    </div>
</template>

<script>
import DxStepper from 'devextreme-vue/stepper';

export default {
    components: {
        DxStepper
    },
    data: function() {
        return {
            stepperInstance: null
        };
    },
    methods: {
        saveInstance: function(e) {
            this.stepperInstance = e.component;
        }
    }
};
</script>

<template>
    <div>
        <DxStepper ...
            @initialized="saveInstance">
        </DxStepper>
    </div>
</template>

<script setup>
import DxStepper from 'devextreme-vue/stepper';

let stepperInstance = null;

const saveInstance = (e) => {
    stepperInstance = e.component;
}
</script>

import Stepper from 'devextreme-react/stepper';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.saveInstance = this.saveInstance.bind(this);
    }

    saveInstance(e) {
        this.stepperInstance = e.component;
    }

    render() {
        return (
            <div>
                <Stepper onInitialized={this.saveInstance} />
            </div>
        );
    }
}

See Also

The following code snippet shows how to subscribe to component property changes:

$(function() {
    $("#stepperContainer").dxStepper({
        // ...
        onOptionChanged: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    });
});

<dx-stepper ...
    (onOptionChanged)="handlePropertyChange($event)"> 
</dx-stepper>

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 

export class AppComponent { 
    // ...
    handlePropertyChange(e) {
        if(e.name === "changedProperty") { 
            // handle the property change here
        }
    }
}

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { AppComponent } from './app.component'; 
import { DxStepperModule } from 'devextreme-angular'; 

@NgModule({ 
    declarations: [ 
        AppComponent 
    ], 
    imports: [ 
        BrowserModule, 
        DxStepperModule 
    ], 
    providers: [ ], 
    bootstrap: [AppComponent] 
}) 

export class AppModule { }  

<template> 
    <DxStepper ...
        @option-changed="handlePropertyChange"
    />            
</template> 

<script>  
import 'devextreme/dist/css/dx.light.css'; 
import DxStepper from 'devextreme-vue/stepper'; 

export default { 
    components: { 
        DxStepper
    }, 
    // ...
    methods: { 
        handlePropertyChange: function(e) {
            if(e.name === "changedProperty") {
                // handle the property change here
            }
        }
    } 
} 
</script> 

import React from 'react';  
import 'devextreme/dist/css/dx.light.css'; 

import Stepper from 'devextreme-react/stepper'; 

const handlePropertyChange = (e) => {
    if(e.name === "changedProperty") {
        // handle the property change here
    }
}

export default function App() { 
    return ( 
        <Stepper ...
            onOptionChanged={handlePropertyChange}
        />        
    ); 
} 

View Demo

When this property is set to true, the UI component 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
});

DataGrid Demo Navigation UI Demo Editors Demo

Users can press arrow keys to move focus between items. Set selectOnFocus to true to synchronize keyboard navigation and item selection.

View Demo

The value of this property will be passed to the tabindex attribute of the HTML element that underlies the UI component.

This property accepts a value of one of the following types:

• Number
  The width in pixels.

• String
  A CSS-accepted measurement of width. For example, "55px", "20vw", "80%", "auto", "inherit".