JavaScript/jQuery DataGrid Methods

widgetInstance.byKey(15).done(function(dataObject) {
        // process "dataObject"
    }).fail(function(error) {
        // handle error
    });

var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
dataGrid.cellValue(0, "Position", "CEO");
dataGrid.saveEditData();

import { ..., ViewChild } from "@angular/core";
import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
    // Prior to Angular 8
    // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    updateCell(rowIndex, dataField, value) {
        this.dataGrid.instance.cellValue(rowIndex, dataField, value);
        this.dataGrid.instance.saveEditData();
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

<template>
    <DxDataGrid ...
        :ref="dataGridRefKey"> 
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxDataGrid } from 'devextreme-vue/data-grid';

const dataGridRefKey = 'my-data-grid';

export default {
    components: {
        DxDataGrid
    },
    data() {
        return {
            dataGridRefKey
        };
    },
    methods: {
        updateCell(rowIndex, dataField, value) {
            this.dataGrid.cellValue(rowIndex, dataField, value);
            this.dataGrid.saveEditData();
        }
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRefKey].instance;
        }
    }
}
</script>

import React, { useRef } from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid from 'devextreme-react/data-grid';

export default function App() {
    const dataGrid = useRef(null);
    const updateCell = (rowIndex, dataField, value) => {
        dataGrid.current.instance().cellValue(rowIndex, dataField, value);
        dataGrid.current.instance().saveEditData();
    };
    return (
        <DataGrid ...
            ref={dataGrid}>
        </DataGrid>
    );
}

var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
dataGrid.cellValue(0, 1, "newValue");
dataGrid.saveEditData();

import { ..., ViewChild } from "@angular/core";
import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
    // Prior to Angular 8
    // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
    updateCell(rowIndex, columnIndex, value) {
        this.dataGrid.instance.cellValue(rowIndex, columnIndex, value);
        this.dataGrid.instance.saveEditData();
    }
}
@NgModule({
    imports: [
        // ...
        DxDataGridModule
    ],
    // ...
})

<template>
    <DxDataGrid ...
        :ref="dataGridRefKey"> 
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxDataGrid } from 'devextreme-vue/data-grid';

const dataGridRefKey = 'my-data-grid';

export default {
    components: {
        DxDataGrid
    },
    data() {
        return {
            dataGridRefKey
        };
    },
    methods: {
        updateCell(rowIndex, columnIndex, value) {
            this.dataGrid.cellValue(rowIndex, columnIndex, value);
            this.dataGrid.saveEditData();
        }
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRefKey].instance;
        }
    }
}
</script>

import React, { useRef } from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid from 'devextreme-react/data-grid';

export default function App() {
    const dataGrid = useRef(null);
    const updateCell = (rowIndex, columnIndex, value) => {
        dataGrid.current.instance().cellValue(rowIndex, columnIndex, value);
        dataGrid.current.instance().saveEditData();
    };
    return (
        <DataGrid ...
            ref={dataGrid}>
        </DataGrid>
    );
}

DevExpress.ui.dxDataGrid.defaultOptions({ 
    device: { deviceType: "desktop" },
    options: {
        // Here go the DataGrid properties
    }
});

import DataGrid, { Properties } from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    constructor () {
        DataGrid.defaultOptions<Properties>({
            device: { deviceType: "desktop" },
            options: {
                // Here go the DataGrid properties
            }
        });
    }
}

<template>
    <div>
        <DxDataGrid id="dataGrid1" />
        <DxDataGrid id="dataGrid2" />
    </div>
</template>
<script>
import DxDataGrid from "devextreme-vue/data-grid";
import DataGrid from "devextreme/ui/data_grid";

DataGrid.defaultOptions({
    device: { deviceType: "desktop" },
    options: {
        // Here go the DataGrid properties
    }
});

export default {
    components: {
        DxDataGrid
    }
}
</script>

import dxDataGrid from "devextreme/ui/data_grid";
import DataGrid from "devextreme-react/data-grid";

dxDataGrid.defaultOptions({
    device: { deviceType: "desktop" },
    options: {
        // Here go the DataGrid properties
    }
});

export default function App() {
    return (
        <div>
            <DataGrid id="dataGrid1" />
            <DataGrid id="dataGrid2" />
        </div>
    )
}

const devicesConfig = [
    { deviceType: 'desktop' },
    { deviceType: 'tablet' },
    { deviceType: 'phone' },
];

devicesConfig.forEach(deviceConfig => {
    DevExpress.ui.dxDataGrid.defaultOptions({ 
        device: deviceConfig,
        options: {
            // Here go the DataGrid properties
        }
    });
});

import DataGrid, { Properties } from "devextreme/ui/data_grid";
// ...
export class AppComponent {
    constructor () {
        const devicesConfig = [
            { deviceType: 'desktop' },
            { deviceType: 'tablet' },
            { deviceType: 'phone' },
        ];

        devicesConfig.forEach(deviceConfig => {
            DataGrid.defaultOptions<Properties>({
                device: deviceConfig,
                options: {
                    // Here go the DataGrid properties
                }
            });
        });
    }
}

<template>
    <div>
        <DxDataGrid />
    </div>
</template>
<script>
import DxDataGrid from "devextreme-vue/data-grid";
import DataGrid from "devextreme/ui/data_grid";

const devicesConfig = [
    { deviceType: 'desktop' },
    { deviceType: 'tablet' },
    { deviceType: 'phone' },
];

devicesConfig.forEach(deviceConfig => {
    DataGrid.defaultOptions({
        device: deviceConfig,
        options: {
            // Here go the DataGrid properties
        }
    });
});

export default {
    components: {
        DxDataGrid
    }
}
</script>

import dxDataGrid from "devextreme/ui/data_grid";
import DataGrid from "devextreme-react/data-grid";

const devicesConfig = [
    { deviceType: 'desktop' },
    { deviceType: 'tablet' },
    { deviceType: 'phone' },
];

devicesConfig.forEach(deviceConfig => {
    dxDataGrid.defaultOptions({
        device: deviceConfig,
        options: {
            // Here go the DataGrid properties
        }
    });
});

export default function App() {
    return (
        <div>
            <DataGrid />
        </div>
    )
}

$("#myDataGrid").dxDataGrid("dispose");
$("#myDataGrid").remove();

<dx-data-grid ...
    *ngIf="condition">
</dx-data-grid>

<template>
    <DxDataGrid ...
        v-if="condition">
    </DxDataGrid>
</template>

<script>
import DxDataGrid from 'devextreme-vue/data-grid';

export default {
    components: {
        DxDataGrid
    }
}
</script>

import React from 'react';

import DataGrid from 'devextreme-react/data-grid';

function DxDataGrid(props) {
    if (!props.shouldRender) {
        return null;
    }

    return (
        <DataGrid ... >    
        </DataGrid>
    );
}

class App extends React.Component {
    render() {
        return (
            <DxDataGrid shouldRender="condition" />
        );
    }
}
export default App;

var dataGrid = $("#dataGridContainer").dxDataGrid("instance");

var selectedRowsData = dataGrid.getSelectedRowsData();

// ===== or when deferred selection is used =====
dataGrid.getSelectedRowsData().then(function(selectedRowsData) {
    // Your code goes here
});

<template>
    <DxDataGrid ...
        :ref="dataGridRef">
    </DxDataGrid>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid from 'devextreme-vue/data-grid';

const dataGridRef = 'dataGrid';

export default {
    components: {
        DxDataGrid
    },
    data() {
        return {
            dataGridRef,
            selectedRowsData: []
        }
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRef].instance;
        }
    },
    methods: {
        getSelectedData() {
            this.selectedRowsData = this.dataGrid.getSelectedRowsData();

            // ===== or when deferred selection is used =====
            this.dataGrid.getSelectedRowsData().then((selectedRowsData) => {
                // Your code goes here
            });
        }
    }
}
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import DataGrid from 'devextreme-react/data-grid';

class App extends React.Component {
    constructor(props) {
        super(props);

        this.dataGridRef = React.createRef();

        this.selectedRowsData = [];

        this.getSelectedData = () => {
            this.selectedRowsData = this.dataGrid.getSelectedRowsData();

            // ===== or when deferred selection is used =====
            this.dataGrid.getSelectedRowsData().then((selectedRowsData) => {
                // Your code goes here
            });
        }
    }

    get dataGrid() {
        return this.dataGridRef.current.instance();
    }

    render() {
        return (
            <DataGrid ...
                ref={this.dataGridRef}>
            </DataGrid>
        );
    }
}
export default App;

@(Html.DevExtreme().DataGrid()
    .ID("dataGrid")
    @* ... *@
)

<script type="text/javascript">
    function getSelectedData() {
        var dataGrid = $("#dataGrid").dxDataGrid("instance");
        var selectedRowsData = dataGrid.getSelectedRowsData();
        // ...

        // ===== or when deferred selection is used =====
        dataGrid.getSelectedRowsData().then(function(selectedRowsData) {
            // Your code goes here
        });
    }
</script>

var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
dataGrid.refresh()
    .done(function() {
        // ...
    })
    .fail(function(error) {
        // ...
    });

<dx-data-grid #dataGridVar ... >
    <!-- ... -->
</dx-data-grid>

import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    @ViewChild('dataGridVar', { static: false }) dataGrid: DxDataGridComponent;
    // Prior to Angular 8
    // @ViewChild('dataGridVar') dataGrid: DxDataGridComponent;

    refreshDataGrid() {
        this.dataGrid.instance.refresh()
            .then(function() {
                // ...
            })
            .catch(function(error) {
                // ...
            });
    }
}

<template>
    <DxDataGrid ...
        :ref="dataGridRefKey">
        <!-- ... -->
    </DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';

import { DxDataGrid, /* ... */ } from 'devextreme-vue/data-grid';

const dataGridRefKey = 'my-data-grid';

export default {
    components: {
        DxDataGrid,
        // ...
    },
    data() {
        return {
            dataGridRefKey
        };
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRefKey].instance;
        }
    },
    methods: {
        refreshDataGrid() {
            this.dataGrid.refresh()
                .then(function() {
                    // ...
                })
                .catch(function(error) {
                    // ...
                });
        }
    }
};
</script>

import React from 'react';

import 'devextreme/dist/css/dx.light.css';

import { DataGrid, /* ... */ } from 'devextreme-react/data-grid';

class App extends React.Component {
    render() {
        return (
            <DataGrid ...
                ref={ref => this.dataGrid = ref}>
                {/* ... */}
            </DataGrid>
        );
    }
    refreshDataGrid() {
        this.dataGrid.instance.refresh()
            .then(function() {
                // ...
            })
            .catch(function(error) {
                // ...
            });
    }
}
export default App;

@(Html.DevExtreme().DataGrid()
    .ID("dataGridContainer")
    // ...
)
<script type="text/javascript">
    function refreshDataGrid() {
        var dataGrid = $("#dataGridContainer").dxDataGrid("instance");
        dataGrid.refresh()
            .done(function() {
                // ...
            })
            .fail(function(error) {
                // ...
            });
    }
</script>

$(function () {
    const dataGrid = $("#dataGridContainer").dxDataGrid({ 
        // ...
    }).dxDataGrid("instance");
    $("#save").dxButton({
        text: "Save State",
        onClick: function() {
            const state = dataGrid.state();
            // Saves the state in the local storage
            localStorage.setItem("dataGridState", JSON.stringify(state));
        }
    });
    $("#load").dxButton({
        text: "Load State",
        onClick: function() {
            const state = JSON.parse(localStorage.getItem("dataGridState"));
            dataGrid.state(state);
        }
    });
});

<template>
    <DxDataGrid ...
        :ref="dataGridRefKey">
    </DxDataGrid>
    <DxButton
        text="Save State"
        @click="saveState"
    />
    <DxButton
        text="Load State"
        @click="loadState"
    />
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxDataGrid, {
    // ...
} from 'devextreme-vue/data-grid';
import DxButton from 'devextreme-vue/button';

const dataGridRefKey = "my-data-grid";

export default {
    components: {
        DxDataGrid,
        // ...
        DxButton
    },
    data() {
        return {
            dataGridRefKey
        }
    },
    methods: {
        saveState() {
            const state = this.dataGrid.state();
            // Saves the state in the local storage
            localStorage.setItem("dataGridState", JSON.stringify(state));
        },
        loadState() {
            const state = JSON.parse(localStorage.getItem("dataGridState"));
            this.dataGrid.state(state);
        }
    },
    computed: {
        dataGrid: function() {
            return this.$refs[dataGridRefKey].instance;
        }
    }
}
</script>

import React, { useRef } from 'react';
import 'devextreme/dist/css/dx.light.css';

import DataGrid, {
    // ...
} from 'devextreme-react/data-grid';
import Button from 'devextreme-react/button';

export default function App() {
    const dataGrid = useRef(null);
    const saveState = () => {
        const state = dataGrid.current.instance().state();
        // Saves the state in the local storage
        localStorage.setItem("dataGridState", JSON.stringify(state));
    };
    const loadState = () => {
        const state = JSON.parse(localStorage.getItem("dataGridState"));
        dataGrid.current.instance().state(state);
    };
    return (
        <React.Fragment>
            <DataGrid ...
                ref={dataGrid}>
            </DataGrid>
            <Button
                text="Save State"
                onClick={saveState}
            />
            <Button
                text="Load State"
                onClick={loadState}
            />
        </React.Fragment>
    );
}

$(() => {
    const dataSource = new DevExpress.data.DataSource({
        store: customers,
        paginate: true
    });

    $('#gridContainer').dxDataGrid({
        dataSource,
        paging: {
            enabled: true
        },
        // ...
        onContentReady (e) {
            const totalCount = e.component.totalCount();
            // ...
        }
    });
});

<template>
    <DxDataGrid ...
        :data-source="dataSource"
        @content-ready="getTotalCount"
    >
        <DxPaging :enabled="true" />
    </DxDataGrid>
</template>

<script>
import DxDataGrid, { DxPaging } from 'devextreme-vue/data-grid';
import DataSource from 'devextreme/data/data_source';

const dataSource = new DataSource({
    store: customers,
    paginate: true
});

export default {
    components: {
        DxDataGrid,
        DxPaging
    },
    data() {
        return {
            dataSource,
            totalCount
        }
    },
    methods: {
        getTotalCount(e) {
            this.totalCount = e.component.totalCount();
            // ...
        }
    }
}
</script>

import React from 'react';
import DataGrid, { Paging } from 'devextreme-react/data-grid';
import DataSource from 'devextreme/data/data_source';

const dataSource = new DataSource({
    store: customers,
    paginate: true
});

const getTotalCount = (e) => {
    const totalCount = e.component.totalCount();
    // ...
}

function App() {
    return (
        <DataGrid ...
            dataSource={dataSource}
            onContentReady={getTotalCount}
        >
            <Paging enabled={true} />
        </DataGrid>
    );
}
export default App;