DevExtreme Vue - CustomStore LoadOptions

This section describes the loadOptions object's fields.

Type:

Object

This object is used to specify settings according to which the server should process data. More often these settings are passed as a parameter to the load function and depend on the operations (paging, filtering, sorting, etc.) that you have enabled in the DataSource or UI component.

See Also

customQueryParams

An object for storing additional settings that should be sent to the server. Relevant to the ODataStore only.

Type: any

See Also

endDate

Specifies the end date of the date navigator range. Relevant to the Scheduler only.

Type:

Date

expand

An array of strings that represent the names of navigation properties to be loaded simultaneously with the ODataStore.

Type:

Array<String>

See Also

filter

A filter expression.

Type:

Object

Defines filtering parameters. Possible variants:

  • Binary filter
    Supported operators: "=", "<>", ">", ">=", "<", "<=", "startswith", "endswith", "contains", "notcontains".
    Example:

    [ "dataField", "=", 3 ]

  • Unary filter
    Supported operators: binary operators, "!".
    Example: 

    [ "!", [ "dataField", "=", 3 ] ]

  • Complex filter
    Supported operators: binary and unary operators, "and", "or".
    Example:

    [
    [ "dataField", "=", 10 ],
    "and",
    [
        [ "anotherDataField", "<", 3 ],
        "or",
        [ "anotherDataField", ">", 11 ]
    ]
]
See Also

group

A group expression.

Type:

Object

Defines grouping levels to be applied to the data. This object can have the following fields:

  • selector: String
    The field name to group by.
  • desc: Boolean
    Defines the selector field's descending sort order.
  • isExpanded: Boolean
    Defines whether to return the group's items or null. For grid-like components (DataGrid, TreeList, and so on), this field always returns true for all groups except the last one. DevExtreme components accept the unspecified value of the isExpanded field as true.
  • groupInterval: Number or String
    A numeric value groups data in ranges of the given length. A string value applies only to dates and can be "year", "quarter", "month", "day", "dayOfWeek", "hour", "minute" and "second".

groupSummary

A group summary expression. Used with the group setting.

Type:

Object

Contains group summary definitions with the following structure, where summaryType can be "sum", "avg", "min", "max" or "count":

{ selector: "field", summaryType: "sum" }

When this property is specified, each data object should have a summary array that contains the resulting values in the same order as the summary definitions.

parentIds

The IDs of the rows being expanded. Relevant only when the CustomStore is used in the TreeList UI component.

Type:

Array<any>

If the TreeList's expandedRowKeys are set, the parentIds array contains them and the root ID. Otherwise, the array contains only the ID of the row being expanded.

requireGroupCount

Indicates whether a top-level group count is required. Used in conjunction with the filter, take, skip, requireTotalCount, and group settings.

Type:

Boolean

When this property is true, the result should contain the groupCount field. This field is the resulting data set's top-level group count.

requireTotalCount

Indicates whether the total count of data objects is needed.

Type:

Boolean

When this property is true, the store expects the result to contain the totalCount field, which is the total data object count in the resulting data set. This count should reflect the number of data items after filtering but disregard any take parameter used for the query.

searchExpr

A data field or expression whose value is compared to the search value.

Type:

getter

|

Array<getter>

Along with searchValue and searchOperation, this property defines a simple filtering condition.

searchOperation

A comparison operation.

Type:

String

Accepted Values: '=' | '<>' | '>' | '>=' | '<' | '<=' | 'startswith' | 'endswith' | 'contains' | 'notcontains'

Along with searchValue and searchExpr, this property defines a simple filtering condition.

searchValue

The current search value.

Type: any

Along with searchOperation and searchExpr, this property defines a simple filtering condition.

select

A select expression.

Type:

Object

skip

The number of data objects to be skipped from the result set's start. In conjunction with take, used to implement paging.

Type:

Number

sort

A sort expression.

Type:

Object

Defines sorting properties. This object can have the following fields:

  • selector: String
    The field name to sort by.
  • desc: Boolean
    Defines the selector field's descending sort order.

startDate

Specifies the start date of the date navigator range. Relevant to the Scheduler only.

Type:

Date

take

The number of data objects to be loaded. In conjunction with skip, used to implement paging.

Type:

Number

totalSummary

A total summary expression.

Type:

Object

Contains summary definitions with the following structure, where summaryType can be "sum", "avg", "min", "max" or "count":

{ selector: "field", summaryType: "sum" }

When this property is specified, the store expects the result to have the summary array that contains the result values in the same order as the summary definitions.

userData

An object for storing additional settings that should be sent to the server.

Type: any

jQuery
index.js
$(function() {
    var customDataSource = new DevExpress.data.CustomStore({
        key: "ID",
        load: function (loadOptions) {
            let value = loadOptions.userData?.someValue;
            if(!value) {
                value = 5;
                alert("Initial value is set");
            } 
            else {
                alert("Cached value: " + value);
            }
        }
    });
    // ...
});
Angular
app.component.ts
import { Component } from '@angular/core';
import CustomStore from 'devextreme/data/custom_store';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    customDataSource: CustomStore;
    constructor() {
        this.customDataSource = new CustomStore({
            key: 'ID',
            load: (loadOptions) => {
                let value = loadOptions.userData?.someValue;
                if(!value) {
                    value = 5;
                    alert("Initial value is set");
                } 
                else {
                    alert("Cached value: " + value);
                }
            }
        });
    }
}
Vue
App.vue
<template>
    <!-- ... -->
</template>

<script>
// ...
import CustomStore from 'devextreme/data/custom_store';

const customDataSource = new CustomStore({
    key: 'ID',
    load: (loadOptions) => {
        let value = loadOptions.userData?.someValue;
        if(!value) {
            value = 5;
            alert("Initial value is set");
        } 
        else {
            alert("Cached value: " + value);
        }
    }
});

export default {
    components: {
        // ...
    },
    data() {
        return {
            customDataSource
        }
    }
}
</script>
React
App.js
// ...
import CustomStore from 'devextreme/data/custom_store';

const customDataSource = new CustomStore({
    key: 'ID',
    load: (loadOptions) => {
        let value = loadOptions.userData?.someValue;
        if(!value) {
            value = 5;
            alert("Initial value is set");
        } 
        else {
            alert("Cached value: " + value);
        }
    }
});

class App extends React.Component {
    render() {
        return (
            {/* ... */}
        );
    }
}
export default App;