DevExtreme Angular - DataSource Properties
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.
- 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);
- });
- }
- });
- }
- }
customQueryParams
Custom parameters that should be passed to an OData service with the load query. Available only for the ODataStore.
- 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"
- }
- });
- }
- }
See Also
expand
Specifies the navigation properties to be loaded with the OData entity. Available only for the ODataStore.
- 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"]
- });
- }
- }
See Also
filter
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 ]
- ]
- ]
- import DataSource from "devextreme/data/data_source";
- // ...
- export class AppComponent {
- ds: DataSource;
- constructor() {
- this.ds = new DataSource({
- // ...
- filter: [ "count", "<", "10" ]
- });
- }
- }
See Also
group
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.
- selector: String
Array
An array of strings and objects described above.Function
A function that returns the value to group by.
- 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";
- } */
- });
- }
- }
See Also
langParams
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:
- 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'
- }
- }
- });
- }
- }
map
- 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
- }
- }
- });
- }
- }
See Also
onChanged
Information about changes.
Appears only when the push(changes) method is called and the reshapeOnPush property is false.
Name | Type | Description |
---|---|---|
changes | Array<any> |
The received changes. |
pageSize
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.
paginate
Specifies whether the DataSource loads data items by pages or all at once. Defaults to false if group is set; otherwise, true.
postProcess
- import DataSource from "devextreme/data/data_source";
- // ...
- export class AppComponent {
- ds: DataSource;
- constructor() {
- this.ds = new DataSource({
- postProcess: (data) => {
- // Your code goes here
- }
- });
- }
- }
See Also
pushAggregationTimeout
Specifies the period (in milliseconds) when changes are aggregated before pushing them to the DataSource.
When this property is undefined, the aggregation period is calculated automatically based on the rendering speed's measurements.
See Also
- push(changes) in: ArrayStore | CustomStore | LocalStore | ODataStore
- reshapeOnPush
reshapeOnPush
Specifies whether to reapply sorting, filtering, grouping, and other data processing operations after receiving a push.
See Also
- pushAggregationTimeout
- push(changes) in: ArrayStore | CustomStore | LocalStore | ODataStore
searchExpr
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.
- import DataSource from "devextreme/data/data_source";
- // ...
- export class AppComponent {
- ds: DataSource;
- constructor() {
- this.ds = new DataSource({
- // ...
- searchExpr: ["firstName", "lastName"]
- });
- }
- }
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.
See Also
searchOperation
You can use this property with searchExpr 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.
See Also
searchValue
You can use this property along with searchExpr and searchOperation to specify a simple filter. Use the filter property for more complex filtering conditions. Filters are combined if you specify them in both ways.
See Also
select
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.
- import DataSource from "devextreme/data/data_source";
- // ...
- export class AppComponent {
- ds: DataSource;
- constructor() {
- this.ds = new DataSource({
- // ...
- select: ["firstName", "lastName", "birthDate"]
- });
- }
- }
See Also
sort
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.
- selector: String
Array
An array of strings and objects described above.Function
A function that returns the value to sort by.
- 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;
- } */
- });
- }
- }
See Also
store
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.
- 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" }
- ]
- });
- }
- }
If you have technical questions, please create a support ticket in the DevExpress Support Center.