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

Showing content from https://js.devexpress.com/Documentation/ApiReference/Data_Layer/PivotGridDataSource/ below:

DevExtreme jQuery - PivotGridDataSource API

The PivotGridDataSource is an object that provides an API for processing data from an underlying store. This object is used in the PivotGrid UI component.

$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        store: {
            // ...
            // Underlying store is configured here
            // ...
        },
        fields: [{
            area: "column",
            dataField: "OrderDate",
            dataType: "date"
        }, {
            area: "row",
            dataField: "ShipCity"
        }, {
            area: "data",
            summaryType: "count"
        }]
    });

    $("#pivotGridContainer").dxPivotGrid({
        dataSource: pivotGridDataSource
    });
});

import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
import { DxPivotGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    pivotGridDataSource: PivotGridDataSource;
    constructor () {
        this.pivotGridDataSource = new PivotGridDataSource({
            store: {
                // ...
                // Underlying store is configured here
                // ...
            },
            fields: [{
                area: "column",
                dataField: "OrderDate",
                dataType: "date"
            }, {
                area: "row",
                dataField: "ShipCity"
            }, {
                area: "data",
                summaryType: "count"
            }]
        });
    }
}

@NgModule({
    imports: [
        // ...
        DxPivotGridModule
    ],
    // ...
})

<dx-pivot-grid
    [dataSource]="pivotGridDataSource">
</dx-pivot-grid>

<template>
    <DxPivotGrid
        :data-source="pivotGridDataSource"
    />
</template>

<script>
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-vue/pivot-grid';

const pivotGridDataSource = new PivotGridDataSource({
    store: {
        // ...
        // Underlying store is configured here
        // ...
    },
    fields: [{
        area: 'column',
        dataField: 'OrderDate',
        dataType: 'date'
    }, {
        area: 'row',
        dataField: 'ShipCity'
    }, {
        area: 'data',
        summaryType: 'count'
    }]
});

export default {
    components: {
        DxPivotGrid
    },
    data() {
        return {
            pivotGridDataSource
        }
    }
}
</script>

import React from 'react';

import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-react/pivot-grid';

const pivotGridDataSource = new PivotGridDataSource({
    store: {
        // ...
        // Underlying store is configured here
        // ...
    },
    fields: [{
        area: 'column',
        dataField: 'OrderDate',
        dataType: 'date'
    }, {
        area: 'row',
        dataField: 'ShipCity'
    }, {
        area: 'data',
        summaryType: 'count'
    }]
});

class App extends React.Component {
    render() {
        return (
            <PivotGrid
                dataSource={pivotGridDataSource}
            />
        );
    }
}
export default App;

If you create a

instance outside the UI component (as shown above), make sure to

of it when it is no longer used. If the instance is created inside the UI component, it will be disposed of automatically.

The

is immutable. You cannot change its configuration at runtime. However, you can use its

to manipulate it.

View Demo

This section describes properties that configure the PivotGridDataSource.

Configures pivot grid fields.

Specifies data filtering conditions. Cannot be used with an XmlaStore.

A function that is executed after data is successfully loaded.

A function that is executed when all fields are loaded from the store and they are ready to be displayed in the PivotGrid.

A function that is executed when data loading fails.

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

Specifies whether the PivotGridDataSource should load data in portions. Can be used only with an XmlaStore.

Specifies whether the data processing operations (filtering, grouping, summary calculation) should be performed on the server.

Specifies whether to auto-generate pivot grid fields from the store's data.

Configures the DataSource's underlying store.

The PivotGridDataSource allows you to specify CustomStore properties in its configuration object, as shown in the following code:

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

import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    pivotGridDataSource: PivotGridDataSource;
    constructor() {
        this.pivotGridDataSource = new PivotGridDataSource({
            store: new CustomStore({
                load: (loadOptions) => {
                    // Loading data objects
                },
                byKey: (key) => {
                    // Retrieving a data object by key
                }
            })
        });
    }
}

<script>
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import CustomStore from 'devextreme/data/custom_store';

const pivotGridDataSource = new PivotGridDataSource({
    store: new CustomStore({
        load: (loadOptions) => {
            // Loading data objects
        },
        byKey: (key) => {
            // Retrieving a data object by key
        }
    })
});

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

// ...
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import CustomStore from 'devextreme/data/custom_store';

const pivotGridDataSource = new PivotGridDataSource({
    store: new CustomStore({
        load: (loadOptions) => {
            // Loading data objects
        },
        byKey: (key) => {
            // Retrieving a data object by key
        }
    })
});

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

This section describes methods that control the PivotGridDataSource.

This section describes events that the PivotGridDataSource raises.

Raised after data is successfully loaded.

Raised when all fields are loaded from the store and they are ready to be displayed in the PivotGrid.

Raised when data loading fails.

Raised when the data loading status changes.

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