Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://js.devexpress.com/React/Documentation/ApiReference/Data_Layer/DataSource/Configuration/ below:

DevExtreme React - DataSource Props

This section describes properties that configure the DataSource.

The DataSource allows you to specify CustomStore properties in its configuration object. If you define CustomStore properties as shown in the following code, they override the store.

var infiniteList = new DevExpress.data.DataSource({
    load: function (loadOptions) {
        // Loading data objects
    },
    byKey: function (key) {
        // Retrieving a data object by key
    }
});

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    infiniteList: DataSource;
    constructor() {
        this.infiniteList = new DataSource({
            load: (loadOptions) => {
                return new Promise((resolve, reject) => {
                    const data = // Loading data objects
                    resolve(data);
                });
            },
            byKey: (key) => {
                return new Promise((resolve, reject) => {
                    const obj = // Retrieving a data object by key
                    resolve(obj);
                });
            }
        });
    }
}

<script>
import DataSource from 'devextreme/data/data_source';

const infiniteList = new DataSource({
    load: (loadOptions) => {
        // Loading data objects
    },
    byKey: (key) => {
        // Retrieving a data object by key
    }
});

export default {
    // ...
    data() {
        return {
            infiniteList
        }
    }
}
</script>

// ...
import DataSource from 'devextreme/data/data_source';

const infiniteList = new DataSource({
    load: (loadOptions) => {
        // Loading data objects
    },
    byKey: (key) => {
        // Retrieving a data object by key
    }
});

class App extends React.Component {
    // ...
}
export default App;

Custom parameters that should be passed to an OData service with the load query. Available only for the ODataStore.

var ds = new DevExpress.data.DataSource({
    store: {
        type: "odata",
        // ODataStore is configured here
    },
    customQueryParams: {
        param: "value"
    }
});

import DataSource from "devextreme/data/data_source";
import ODataStore from "devextreme/data/odata/store";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            store: new ODataStore({
                // ODataStore is configured here
            }),
            customQueryParams: {
                param: "value"
            }
        });
    }
}

<script>
import DataSource from 'devextreme/data/data_source';
import ODataStore from 'devextreme/data/odata/store';

const ds = new DataSource({
    store: new ODataStore({
        // ODataStore is configured here
    }),
    customQueryParams: {
        param: 'value'
    }
});

export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

// ...
import DataSource from 'devextreme/data/data_source';
import ODataStore from 'devextreme/data/odata/store';

const ds = new DataSource({
    store: new ODataStore({
        // ODataStore is configured here
    }),
    customQueryParams: {
        param: 'value'
    }
});

class App extends React.Component {
    // ...
}
export default App;

• OData - Invoking Service Operations

Specifies the navigation properties to be loaded with the OData entity. Available only for the ODataStore.

var ds = new DevExpress.data.DataSource({
    store: {
        type: "odata",
        // ODataStore is configured here
    },
    expand: ["PropertyName1", "PropertyName2"]
});

import DataSource from "devextreme/data/data_source";
import ODataStore from "devextreme/data/odata/store";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            store: new ODataStore({
                // ODataStore is configured here
            }),
            expand: ["PropertyName1", "PropertyName2"]
        });
    }
}

<script>
import DataSource from 'devextreme/data/data_source';
import ODataStore from 'devextreme/data/odata/store';

const ds = new DataSource({
    store: new ODataStore({
        // ODataStore is configured here
    }),
    expand: ['PropertyName1', 'PropertyName2']
});

export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

// ...
import DataSource from 'devextreme/data/data_source';
import ODataStore from 'devextreme/data/odata/store';

const ds = new DataSource({
    store: new ODataStore({
        // ODataStore is configured here
    }),
    expand: ['PropertyName1', 'PropertyName2']
});

class App extends React.Component {
    // ...
}
export default App;

@(Html.DevExtreme().WidgetName()
    .DataSource(ds => ds.OData()
        .Expand("PropertyName1", "PropertyName2")
    )
)

@(Html.DevExtreme().WidgetName() _
    .DataSource(Function(ds)
        Return ds.OData() _
                 .Expand("PropertyName1", "PropertyName2")
    End Function)
)

• OData - Associations

Specifies data filtering conditions.

Possible variants:

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

• 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 ]
      ]
  ]

var ds = new DevExpress.data.DataSource({
    // ...
    filter: [ "count", "<", "10" ]
});

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            // ...
            filter: [ "count", "<", "10" ]
        });
    }
}

<script>
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    filter: [ 'count', '<', '10' ]
});

export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

// ...
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    filter: [ 'count', '<', '10' ]
});

class App extends React.Component {
    // ...
}
export default App;

@(Html.DevExtreme().WidgetName()
    .DataSourceOptions(dso => dso
        .Filter("[ 'count', '<', '10' ]")
    )
)

Filtering works when inputting a plain data structure only. However, if you need the filtering capability and hierarchical data, transform the plain data using the

's

property.

• Filtering

Specifies data grouping properties.

This property accepts one of the following:

• String
  The field name to group by.

• Object
  An object with the following fields:

  • selector: String
    The field name to group by.
  • desc: Boolean
    Sorts the selector field in descending order.

• Array
  An array of strings and objects described above.

• Function
  A function that returns the value to group by.

var ds = new DevExpress.data.DataSource({
    // ...
    group: { selector: "LastName", desc: true },
    /* or as a function
    group: function(e) {
        // creates two custom groups
        return e.BirthYear < 1990 ? "Born before 1990" : "Born after 1990";
    } */
});

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            // ...
            group: { selector: "LastName", desc: true },
            /* or as a function
            group: function(e) {
                // creates two custom groups
                return e.BirthYear < 1990 ? "Born before 1990" : "Born after 1990";
            } */
        });
    }
}

<script>
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    group: { selector: 'LastName', desc: true },
    /* or as a function
    group: function(e) {
        // creates two custom groups
        return e.BirthYear < 1990 ? 'Born before 1990' : 'Born after 1990';
    } */
});

export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

// ...
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    group: { selector: 'LastName', desc: true },
    /* or as a function
    group: function(e) {
        // creates two custom groups
        return e.BirthYear < 1990 ? 'Born before 1990' : 'Born after 1990';
    } */
});

class App extends React.Component {
    // ...
}
export default App;

@(Html.DevExtreme().WidgetName()
    .DataSourceOptions(dso => dso
        .Group("LastName", true)
        // === or as a function ===
        .Group("group_function")
    )
)

<script type="text/javascript">
    function group_function(e) {
        // creates two custom groups
        return e.BirthYear < 1990 ? "Born before 1990" : "Born after 1990";
    }
</script>

• Grouping

Specifies parameters for language-specific sorting and filtering.

Use this property to include language-specific parameters in sorting and filtering operations performed on a client. For example, you can use langParams to make DataSource ignore letters with diacritic symbols. Specify locale and collator options as in the example below:

const dataSource = new DevExpress.data.DataSource({
    // ...
    langParams: {
        locale: 'fr',
        collatorOptions: {
            sensitivity: 'accent',
            caseFirst: 'upper'
        }
    }
});

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    dataSource: DataSource;
    constructor () {
        this.dataSource = new DataSource({
            // ...
            langParams: {
                locale: 'fr',
                collatorOptions: {
                    sensitivity: 'accent',
                    caseFirst: 'upper'
                }
            }
        });
    }
}

<script>
import DataSource from 'devextreme/data/data_source';

const dataSource = new DataSource({
    // ...
    langParams: {
        locale: 'fr',
        collatorOptions: {
            sensitivity: 'accent',
            caseFirst: 'upper'
        }
    }
});

export default {
    data() {
        return {
            dataSource
        }
    }
}
</script>

// ...
import DataSource from 'devextreme/data/data_source';

const dataSource = new DataSource({
    // ...
    langParams: {
        locale: 'fr',
        collatorOptions: {
            sensitivity: 'accent',
            caseFirst: 'upper'
        }
    }
});

function App() {
    // ...
}
export default App;

Specifies an item mapping function.

var ds = new DevExpress.data.DataSource({
    store: {
        data: [{
            firstName: "John",
            lastName: "Smith"
        }]
    },
    map: function (dataItem) {
        return {
            fullName: dataItem.firstName + " " + dataItem.lastName
        }
    }
});

import DataSource from "devextreme/data/data_source";
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            store: new ArrayStore({
                data: [{
                    firstName: "John",
                    lastName: "Smith"
                }]
            }),
            map: (dataItem) => {
                return {
                    fullName: dataItem.firstName + " " + dataItem.lastName
                }
            }
        });
    }
}

<script>
import DataSource from 'devextreme/data/data_source';
import ArrayStore from 'devextreme/data/array_store';

const ds = new DataSource({
    store: new ArrayStore({
        data: [{
            firstName: 'John',
            lastName: 'Smith'
        }]
    }),
    map: (dataItem) => {
        return {
            fullName: dataItem.firstName + ' ' + dataItem.lastName
        }
    }
});

export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

// ...
import DataSource from 'devextreme/data/data_source';
import ArrayStore from 'devextreme/data/array_store';

const ds = new DataSource({
    store: new ArrayStore({
        data: [{
            firstName: 'John',
            lastName: 'Smith'
        }]
    }),
    map: (dataItem) => {
        return {
            fullName: dataItem.firstName + ' ' + dataItem.lastName
        }
    }
});

class App extends React.Component {
    // ...
}
export default App;

@(Html.DevExtreme().WidgetName()
    .DataSource(new [] {
        new {
            firstName = "John",
            lastName = "Smith"
        }
    })
    .DataSourceOptions(dso => dso
        .Map("dataSource_map")
    )
)

<script type="text/javascript">
    function dataSource_map (dataItem) {
        return {
            fullName: dataItem.firstName + " " + dataItem.lastName
        }
    }
</script>

• Item Mapping

A function that is executed after data is loaded.

Information about changes.
Appears only when the push(changes) method is called and the reshapeOnPush property is false.

Object structure:

Array<any>

The received changes.

var ds = new DevExpress.data.DataSource({
    onChanged: function () {
        // Your code goes here
    }
});

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            onChanged: () => {
                // Your code goes here
            }
        });
    }
}

<script>
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    onChanged: () => {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

// ...
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    onChanged: () => {
        // Your code goes here
    }
});

class App extends React.Component {
    // ...
}
export default App;

A function that is executed when data loading fails.

The error.

Object structure:

String

The error message.

var ds = new DevExpress.data.DataSource({
    onLoadError: function (error) {
        console.log(error.message);
    }
});

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            onLoadError: (error) => {
                console.log(error.message);
            }
        });
    }
}

<script>
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    onLoadError: (error) => {
        console.log(error.message);
    }
});

export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

// ...
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    onLoadError: (error) => {
        console.log(error.message);
    }
});

class App extends React.Component {
    // ...
}
export default App;

A function that is executed when the data loading status changes.

Indicates whether data is being loaded.

var ds = new DevExpress.data.DataSource({
    onLoadingChanged: function (isLoading) {
        // Your code goes here
    }
});

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            onLoadingChanged: (isLoading) => {
                // Your code goes here
            }
        });
    }
}

<script>
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    onLoadingChanged: (isLoading) => {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

// ...
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    onLoadingChanged: (isLoading) => {
        // Your code goes here
    }
});

class App extends React.Component {
    // ...
}
export default App;

Specifies the maximum number of data items per page. Applies only if paginate is true.

When data is grouped, this property specifies the number of groups per page. However, in the DataGrid and TreeList, it specifies the number of rows per page including group rows.

Specifies whether the DataSource loads data items by pages or all at once. Defaults to false if group is set; otherwise, true.

Specifies a post processing function.

Data loaded in the DataSource.

var ds = new DevExpress.data.DataSource({
    postProcess: function (data) {
        // Your code goes here
    }
});

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            postProcess: (data) => {
                // Your code goes here
            }
        });
    }
}

<script>
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    postProcess: (data) => {
        // Your code goes here
    }
});

export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

// ...
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    postProcess: (data) => {
        // Your code goes here
    }
});

class App extends React.Component {
    // ...
}
export default App;

@(Html.DevExtreme().WidgetName()
    .DataSourceOptions(dso => dso
        .PostProcess("dataSource_postProcess")
    )
)

<script type="text/javascript">
    function dataSource_postProcess (data) {
        // Your code goes here
    }
</script>

When the

property is enabled, the

function handles only data available for the selected page. If you need to access all data, process data before it is passed to the store.

• Post Processing

Specifies the period (in milliseconds) when changes are aggregated before pushing them to the DataSource.

Specifies whether the DataSource requests the total count of data items in the storage.

If this property is set to true, the Promise that the load() method returns is resolved with a second argument that contains the totalCount field:

var ds = new DevExpress.data.DataSource({
    // ...
    requireTotalCount: true
});

ds.load()
    .done(function (data, extra) {
        // "data" contains the loaded data
        // "extra" contains the "totalCount" field
    });

When

is infinite in the DataGrid, this property's value is always

.

Specifies whether to reapply sorting, filtering, grouping, and other data processing operations after receiving a push.

Specifies the fields to search.

In most cases, you should pass the name of a field by whose value data items are searched. Assign an array of field names to this property if you need to search elements by several field values.

var ds = new DevExpress.data.DataSource({
    // ...
    searchExpr: ["firstName", "lastName"]
});

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            // ...
            searchExpr: ["firstName", "lastName"]
        });
    }
}

<script>
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    searchExpr: ['firstName', 'lastName']
});

export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

// ...
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    searchExpr: ['firstName', 'lastName']
});

class App extends React.Component {
    // ...
}
export default App;

You can use this property along with searchOperation and searchValue to specify a simple filter. Use the filter property for more complex filtering conditions. Filters are combined if you specify them in both ways.

Searching works when inputting a plain data structure only. However, if you need the searching capability and hierarchical data, transform the plain data using the

's

property.

• Data Layer - Search API
• Data Layer - Getters and Setters

Specifies the comparison operation used in searching.

Default Value: 'contains'

Specifies the value to which the search expression is compared.

Type: any

Default Value: null

Specifies the fields to select from data objects.

This property accepts one of the following:

• String
  A field name to select.

• Array of strings
  Several field names to select.

• Function
  A function implementing custom selection logic.

var ds = new DevExpress.data.DataSource({
    // ...
    select: ["firstName", "lastName", "birthDate"] 
});

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            // ...
            select: ["firstName", "lastName", "birthDate"] 
        });
    }
}

<script>
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    select: ['firstName', 'lastName', 'birthDate']
});

export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

// ...
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    select: ['firstName', 'lastName', 'birthDate']
});

class App extends React.Component {
    // ...
}
export default App;

@(Html.DevExtreme().WidgetName()
    .DataSourceOptions(dso => dso
        .Select("firstName", "lastName", "birthDate")
    )
)

• Select Expressions

Specifies data sorting properties.

This property accepts one of the following:

• String
  The field name to sort by.

• Object
  An object with the following fields:

  • selector: String
    The field name to sort by.
  • desc: Boolean
    Sorts the selector field in descending order.

• Array
  An array of strings and objects described above.

• Function
  A function that returns the value to sort by.

var ds = new DevExpress.data.DataSource({
    // ...
    sort: [
        "Position",
        { selector: "Last_Name", desc: true }
    ],
    /* or as a function
    sort: function(e) {
        // CEOs are always displayed at the top
        if(e.Position == "CEO") 
            return "!";
        else
            return e.Position;
    } */
});

import DataSource from "devextreme/data/data_source";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            // ...
            sort: [
                "Position",
                { selector: "Last_Name", desc: true }
            ],
            /* or as a function
            sort: function(e) {
                // CEOs are always displayed at the top
                if(e.Position == "CEO") 
                    return "!";
                else
                    return e.Position;
            } */
        });
    }
}

<script>
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    sort: [
        'Position',
        { selector: 'Last_Name', desc: true }
    ],
    /* or as a function
    sort: function(e) {
        // CEOs are always displayed at the top
        if(e.Position == 'CEO') 
            return '!';
        else
            return e.Position;
    } */
});

export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

// ...
import DataSource from 'devextreme/data/data_source';

const ds = new DataSource({
    // ...
    sort: [
        'Position',
        { selector: 'Last_Name', desc: true }
    ],
    /* or as a function
    sort: function(e) {
        // CEOs are always displayed at the top
        if(e.Position == 'CEO') 
            return '!';
        else
            return e.Position;
    } */
});

class App extends React.Component {
    // ...
}
export default App;

@(Html.DevExtreme().WidgetName()
    .DataSourceOptions(dso => dso
        .Sort("Position", true) // for sorting by a single field
        // === or ===
        .Sort("sort_function")
        // === or ===
        .Sort(s => {             // for sorting by multiple fields
            s.AddSorting("Position");
            s.AddSorting("Last_Name", true);
        })
    )
)

<script type="text/javascript">
    function sort_function(e) {
        // CEOs are always displayed at the top
        if(e.Position == "CEO")
            return "!";
        else
            return e.Position;
    }
</script>

@(Html.DevExtreme().WidgetName() _
    .DataSourceOptions(Sub(dso)
        dso.Sort("Position", True) ' for sorting by a single field
        ' === or ===
        dso.Sort("sort_function")
        ' === or ===
        dso.Sort(Sub(s)             ' for sorting by multiple fields
            s.AddSorting("Position")
            s.AddSorting("Last_Name", True)
        End Sub)
    End Sub)
)

<script type="text/javascript">
    function sort_function(e) {
        // CEOs are always displayed at the top
        if(e.Position == "CEO")
            return "!";
        else
            return e.Position;
    }
</script>

• Sorting

Configures the store underlying the DataSource.

This property accepts one of the following:

• Store instance
  An ArrayStore, LocalStore, ODataStore, or CustomStore instance.

• Store configuration object
  An ArrayStore, LocalStore, or ODataStore configuration object. Make sure to set the type property.

• Array
  Assigning an array to the store property automatically creates an ArrayStore in the DataSource.

var ds = new DevExpress.data.DataSource({
    store: new DevExpress.data.ArrayStore({
        // ArrayStore instance
    })
    // ===== or =====
    store: {
        type: "array",
        // ArrayStore configuration object
    }
    // ===== or =====
    store: [
        { id: 1, name: "John Doe" }
    ]
});

import DataSource from "devextreme/data/data_source";
import ArrayStore from "devextreme/data/array_store";
// ...
export class AppComponent {
    ds: DataSource;
    constructor() {
        this.ds = new DataSource({
            store: new ArrayStore({
                // ArrayStore instance
            })
            // ===== or =====
            store: {
                type: "array",
                // ArrayStore configuration object
            }
            // ===== or =====
            store: [
                { id: 1, name: "John Doe" }
            ]
        });
    }
}

<script>
import DataSource from 'devextreme/data/data_source';
import ArrayStore from 'devextreme/data/array_store';

const ds = new DataSource({
    store: new ArrayStore({
        // ArrayStore instance
    })
    // ===== or =====
    store: {
        type: 'array',
        // ArrayStore configuration object
    }
    // ===== or =====
    store: [
        { id: 1, name: 'John Doe' }
    ]
});

export default {
    // ...
    data() {
        return {
            ds
        }
    }
}
</script>

// ...
import DataSource from 'devextreme/data/data_source';
import ArrayStore from 'devextreme/data/array_store';

const ds = new DataSource({
    store: new ArrayStore({
        // ArrayStore instance
    })
    // ===== or =====
    store: {
        type: 'array',
        // ArrayStore configuration object
    }
    // ===== or =====
    store: [
        { id: 1, name: 'John Doe' }
    ]
});

class App extends React.Component {
    // ...
}
export default App;

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4