DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Implement a Custom Operation

All custom operations are configured in the customOperations array. Follow the steps below to declare an operation:

  1. Specify the operation's name.
    The name identifies the operation and is used later in the UI component's filter expression in the value property. Specify it using the name property.

  2. Express the operation through DataSource-compatible operations.
    Filtering is implemented using the DataSource which supports only a limited set of filter operations. Use the calculateFilterExpression function to express your custom operation through these DataSource-compatible operations.

  3. Customize the appearance.
    Specify the caption and icon to be used for displaying the operation in the drop-down list. You can also customize the editor using the editorTemplate property and the value's text representation using the customizeText property.

  4. Make the operation available for fields.
    Set the dataTypes property to make the operation available for fields of specific data types. You can also make it available for an individual field by including the operation's name in the field's filterOperations array.

View Demo