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

Showing content from https://js.devexpress.com/Vue/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/ below:

Vue DataGrid Methods | Vue Documentation

This section describes the methods that can be used to manipulate the DataGrid UI component.

Adds a new column.

The column's configuration or the data field for which the column should be created.

This method is intended to add columns at runtime. To add columns at design-time, use the columns array.

If stateStoring is enabled, the added column is saved in the UI component's state after the creation.

• Do not call this method to unhide a hidden column. Modify the hidden column's visible property instead.
• addColumn() does not update the component's columns[] array.

Adds an empty data row and switches it to the editing state.

A Promise that is resolved after a new empty row is added.

View Demo

Use this method if you want to add an empty row. If you need to add a row with data, do the following:

• For a remote data source, insert a new row with data into it and reload the data source:

  jQuery

  $(function(){
      var dataGrid = $("#gridContainer").dxDataGrid({
          // ...
      }).dxDataGrid("instance");
      var dataSource = dataGrid.getDataSource();
      dataSource.store().insert(data).then(function() {
          dataSource.reload();
      })
  });

  Angular

  import { Component } from '@angular/core';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      constructor() {
          this.dataSource = new DataSource({
              // ...
          })
      }
      // ...
      insertRowRemote: function(dataObj) {
          this.dataSource.store().insert(dataObj).then(function() {
              this.dataSource.reload();
          })
      }
  }

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  
  import { DxDataGridModule } from 'devextreme-angular';
  
  @NgModule({
      declarations: [
          AppComponent
      ],
      imports: [
          BrowserModule,
          DxDataGridModule
      ],
      bootstrap: [AppComponent]
  })
  export class AppModule { }

  Vue

  <template>
      <DxDataGrid
          :data-source="dataSource"
      />
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.light.css';
  
  import DxDataGrid from 'devextreme-vue/data-grid';
  import DataSource from 'devextreme/data/data_source';
  
  const ds = new DataSource({
      // ...
  });
  
  export default {
      components: {
          DxDataGrid
      },
      data() {
          return {
              dataSource: ds
          }
      },
      methods: {
          insertRowRemote: function(dataObj) {
              ds.store().insert(dataObj).then(() => ds.reload());
          }
      }
  }
  </script>

  React

  import React from 'react';
  
  import 'devextreme/dist/css/dx.light.css';
  
  import DataGrid from 'devextreme-react/data-grid';
  import DataSource from 'devextreme/data/data_source';
  
  const ds = new DataSource({
      // ...
  });
  
  class App extends React.Component {
      insertRowRemote(dataObj) {
          ds.store().insert(dataObj).then(() => ds.reload());
      }
      render() {
          return (
              <DataGrid
                  dataSource={ds}
              />
          );
      }
  }
  export default App;

• For a local data source, push a new row into it.

  jQuery

  $(function(){
      var dataGrid = $("#gridContainer").dxDataGrid({
          // ...
      }).dxDataGrid("instance");
      var dataSource = dataGrid.getDataSource();
      dataSource.store().push([
          { type: "insert", data: data }
      ])
  });

  Angular

  import { Component } from '@angular/core';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      constructor() {
          this.dataSource = new DataSource({
              // ...
          })
      }
      // ...
      insertRowLocal: function(dataObj) {
          this.dataSource.store().push([
              { type: "insert", data: dataObj }
          ])
      }
  }

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  
  import { DxDataGridModule } from 'devextreme-angular';
  
  @NgModule({
      declarations: [
          AppComponent
      ],
      imports: [
          BrowserModule,
          DxDataGridModule
      ],
      bootstrap: [AppComponent]
  })
  export class AppModule { }

  Vue

  <template>
      <DxDataGrid
          :data-source="dataSource"
      />
  </template>
  
  <script>
  import 'devextreme/dist/css/dx.light.css';
  
  import DxDataGrid from 'devextreme-vue/data-grid';
  import DataSource from 'devextreme/data/data_source';
  
  const ds = new DataSource({
      // ...
  });
  
  export default {
      components: {
          DxDataGrid
      },
      data() {
          return {
              dataSource: ds
          }
      },
      methods: {
          insertRowLocal: function(dataObj) {
              ds.store().push([
                  { type: "insert", data: dataObj }
              ]);
          }
      }
  }
  </script>

  React

  import React from 'react';
  
  import 'devextreme/dist/css/dx.light.css';
  
  import DataGrid from 'devextreme-react/data-grid';
  import DataSource from 'devextreme/data/data_source';
  
  const ds = new DataSource({
      // ...
  });
  
  class App extends React.Component {
      insertRowLocal(dataObj) {
          ds.store().push([
              { type: "insert", data: dataObj }
          ]);
      }
      render() {
          return (
              <DataGrid
                  dataSource={ds}
              />
          );
      }
  }
  export default App;

This method works only when paging.enabled is false or when dataSource.reshapeOnPush is true and remoteOperations is false

• editing.allowUpdating

Shows the load panel.

The text for the load panel to display.

Normally, the load panel is invoked automatically while the UI component is busy rendering or loading data. Additionally, you can invoke it by calling this method. If you call it without the argument, the load panel displays text specified by the loadPanel.text property. To specify the appearance of the load panel, use the loadPanel object. Once invoked from code, the load panel will not hide until you call the endCustomLoading() method.

The load panel invoked from code does not replace the automatically invoked load panel. This circumstance might lead to a situation where the load panel invoked from code suddenly changes its text because it was overridden by the automatically invoked load panel. Therefore, be mindful when invoking the load panel with different text.

Postpones rendering that can negatively affect performance until the endUpdate() method is called.

The beginUpdate() and endUpdate() methods reduce the number of renders in cases where extra rendering can negatively affect performance.

Gets a data object with a specific key.

The following code shows how to get a data object whose key is 15.

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

• instance()

Discards changes that a user made to data.

Gets the value of a cell with a specific row index and a data field, column caption or name.

Return Value: any

The cell's value.

Sets a new value to a cell with a specific row index and a data field, column caption or name.

DataGrid re-renders the entire row or edit form after the cellValue method changes a cell value. To re-render only the modified cell or form item editor, enable repaintChangesOnly.

Call saveEditData() after this method to save the changes:

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>
    );
}

Gets the value of a cell with specific row and column indexes.

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

The visible index of the column to which the cell belongs.

Return Value: any

The cell's value.

Sets a new value to a cell with specific row and column indexes.

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

The visible index of the column to which the cell belongs.

value: any

The cell's new value.

Call saveEditData() after this method to save the changes:

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>
    );
}

Clears all filters applied to UI component rows.

Clears all row filters of a specific type.

Clears selection of all rows on all pages.

Clears sorting settings of all columns at once.

Switches the cell being edited back to the normal state. Takes effect only if editing.mode is batch or cell and showEditorAlways is false.

Collapses the currently expanded adaptive detail row (if there is one).

Collapses master rows or groups of a specific level.

Number

| undefined

The group's level. Pass undefined to collapse all groups. Pass -1 to collapse all master rows.

Collapses a group or a master row with a specific key.

key: any

The key of the group or the master row.

Gets the data column count. Includes visible and hidden columns, excludes command columns.

Gets all properties of a column with a specific identifier.

The column's index, data field, caption, type, or unique name.

This method gets the properties of the first column found by either of the below:

• Name
  The unique name of the column.

• Column Index
  The index of the column in the columns array.

• Data Field
  The name of the data source field assigned to the column.

• Caption
  The text displayed in the column header.

• Service String
  A string that matches the following format: "optionName:value", where optionName is one of the column properties. For example, the following string corresponds to the command column: "type:buttons".

• columns

Gets the value of a single column property.

The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.

The property's name.

Return Value: any

The property's value.

Updates the value of a single column property.

The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.

The property's name.

optionValue: any

The property's new value.

Updates the values of several column properties.

The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.

The properties with their new values.

Specifies the device-dependent default configuration properties for this component.

The component's default device properties.

Object structure:

Device

Function

Device parameters.
When you specify a function, get information about the current device from the argument. Return true if the properties should be applied to the device.

Object

Options to be applied.

defaultOptions is a static method that the UI component class supports. The following code demonstrates how to specify default properties for all instances of the DataGrid UI component in an application executed on the desktop.

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>
    )
}

You can also set rules for multiple device types:

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>
    )
}

Removes a column.

The column's index, data field, caption or unique name.

Removes a row with a specific index.

View Demo

You cannot call this method to delete a row if this row is being edited in row or form editing mode. In these modes, you can modify only one row at a time and you should finish the row edit to call this method.

• addRow()
• deleteColumn(id)
• Delete Rows API

Clears the selection of all rows on all pages or the currently rendered page only.

Depending on the value of the selectAllMode property, this method clears selection of all rows on all pages or on the currently rendered pages only. The selection is cleared of only those rows that meet filtering conditions if a filter is applied. To clear selection regardless of the selectAllMode property's value or applied filters, call the clearSelection() method.

View Demo

Cancels the selection of rows with specific keys.

Disposes of all the resources allocated to the DataGrid instance.

After calling this method, remove the DOM element associated with the UI component:

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

Use conditional rendering instead of this method:

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

Use conditional rendering instead of this method:

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

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

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

Use conditional rendering instead of this method:

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;

Switches a cell with a specific row index and a data field to the editing state. Takes effect only if the editing mode is "batch" or "cell".

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

The name of the data field in the data source.

Switches a cell with specific row and column indexes to the editing state. Takes effect only if the editing mode is "batch" or "cell".

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

The visible index of the column to which the cell belongs.

Switches a row with a specific index to the editing state. Takes effect only if the editing mode is "row", "popup" or "form".

Gets the root UI component element.

Hides the load panel.

Normally, the UI component hides the load panel automatically once data is ready. But if you have invoked the load panel from code using the beginCustomLoading(messageText) method, you must call the endCustomLoading() method to hide it.

Refreshes the UI component after a call of the beginUpdate() method.

The beginUpdate() and endUpdate() methods reduce the number of renders in cases where extra rendering can negatively affect performance.

Expands an adaptive detail row.

key: any

The key of the data row to which the adaptive detail row belongs.

Expands master rows or groups of a specific level. Does not apply if data is remote.

Number

| undefined

The group's level. Pass undefined to expand all groups. Pass -1 to expand all master rows.

Expands a group or a master row with a specific key.

key: any

The key of the group or the master row.

Gets a filter expression applied to the UI component's data source using the filter(filterExpr) method and the DataSource's filter property.

Sets focus on the UI component.

Sets focus on a specific cell.

Gets a cell with a specific row index and a data field, column caption or name.

The cell's container. It is an HTML Element or a jQuery Element when you use jQuery.

If the specified row or data field does not exist, the method returns undefined.

Gets a cell with specific row and column indexes.

The index of the row to which the cell belongs. Refer to Column and Row Indexes for more information.

The visible index of the column to which the cell belongs.

The cell's container. It is an HTML Element or a jQuery Element when you use jQuery.

If the specified row or column does not exist, the method returns undefined.

Gets the total filter that combines all the filters applied.

Gets the total filter that combines all the filters applied.

Specifies whether the total filter should contain data fields instead of getters.

Use this method to get the total filter that combines filters applied using filtering UI elements and the filter(filterExpr) method. getCombinedFilter(returnDataField) can return a filter expression that uses data fields instead of getters if you pass true to the returnDataField parameter. If you implement getters like columns[].calculateCellValue in your DataGrid, set returnDataField to false or utilize the getCombinedFilter() method.

For details on how to obtain all filtered and sorted rows of a DataGrid component with getCombinedFilter(returnDataField), refer to the following example:

View on GitHub

For details on how to filter a Chart component's series based on a DataGrid component's filters with getCombinedFilter(returnDataField), refer to the following example:

View on GitHub

• getCombinedFilter()

Gets the instance of a UI component found using its DOM node.

The UI component's container.

The UI component's instance.

getInstance is a static method that the UI component class supports. The following code demonstrates how to get the DataGrid instance found in an element with the myDataGrid ID:

// Modular approach
import DataGrid from "devextreme/ui/data_grid";
...
let element = document.getElementById("myDataGrid");
let instance = DataGrid.getInstance(element) as DataGrid;

// Non-modular approach
let element = document.getElementById("myDataGrid");
let instance = DevExpress.ui.dxDataGrid.getInstance(element);

• 3rd-Party Frameworks Integration API

Gets the key of a row with a specific index.

Return Value: any

The row's key; undefined if nothing found.

Gets the container of a row with a specific index.

Gets the index of a row with a specific key.

Gets the instance of the UI component's scrollable part.

The scrollable part's instance.

For information on API members of the scrollable part, refer to the ScrollView section. The list below shows ScrollView members that are unavailable for this method.

Properties:

• pullingDownText
• pulledDownText
• refreshingText
• reachBottomText
• onPullDown
• onReachBottom

Methods:

• release(preventScrollBottom)
• refresh()

Gets the currently selected rows' keys.

Keys of currently selected rows or a Promise that is resolved with an array of keys. The keys are stored in the order the user selects rows.

Gets the selected rows' data objects.

The selected rows' data objects.
The objects are not processed by the DataSource and have the same order in which the rows were selected.
When selection is deferred, the method returns a Promise (a native Promise or a jQuery.Promise when you use jQuery) that is resolved with the selected rows' data objects.

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

var selectedRowsData = dataGrid.getSelectedRowsData();

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

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

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

    selectedRowsData = [];

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

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

<dx-data-grid ...
    #dataGridRef
></dx-data-grid>

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';

import { DxDataGridModule } from 'devextreme-angular';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        DxDataGridModule
    ],
    providers: [ ],
    bootstrap: [AppComponent]
})
export class AppModule { }

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

View Demo

cannot be obtained because this method gets data objects from the data source.

• Initial and Runtime Selection
• cellValue(rowIndex, dataField)
• cellValue(rowIndex, visibleColumnIndex)
• getSelectedRowKeys()

Gets the value of a total summary item.

The total summary item's name.

Return Value: any

The total summary item's value.

Gets the index of a visible column.

The column's index, data field, caption, type, or unique name. Refer to columnOption(id) for details.

Gets all visible columns.

Gets all visible columns at a specific hierarchical level of column headers. Use it to access banded columns.

The column headers' level.

Visible columns; may include command columns.

Gets currently rendered rows.

Checks whether the UI component has unsaved changes.

true if the UI component has unsaved changes; otherwise - false.

Gets the UI component's instance. Use it to access other methods of the UI component.

This UI component's instance.

Checks whether an adaptive detail row is expanded or collapsed.

key: any

The key of the data row to which the adaptive detail row belongs.

true if the adaptive detail row is expanded; false if collapsed.

Checks whether a specific group or master row is expanded or collapsed.

key: any

The key of the group or master row.

true if the row is expanded; false if collapsed.

To check whether a group row is expanded, call this method with an array, in which each member is a grouping value. To check if a master row is expanded, pass its key to this method.

Checks whether a row with a specific key is focused.

true if the row is focused; otherwise false.

Checks whether a row found using its data object is selected. Takes effect only if selection.deferred is true.

data: any

The row's data object.

true if the row is selected; otherwise false.

Checks whether a row with a specific key is selected. Takes effect only if selection.deferred is false.

true if the row is selected; otherwise false.

Gets a data object's key.

Return Value: any

The data object's key.

Navigates to a row with the specified key.

A Promise that is resolved after the grid is navigated to the specified row. It is a native Promise or a jQuery.Promise when you use jQuery.

This method performs the following actions:

1. Switches the UI component to the data page that contains the specified row.
2. Expands groups in which the row is nested (if rows are grouped and the groups are collapsed).
3. Scrolls the UI component to display the row (if the row is outside the viewport).

View Demo

The following requirements apply when you use this method:

• The UI component's keyExpr or the store's key property should be specified.

• Rows should be initially sorted by keys. You can sort them on the server or use a column's sortOrder or the DataSource's sort property to sort the rows on the client.

• Scrolling mode should not be "infinite".

If you enable the remoteOperations property, the DataGrid generates additional requests with comparison operators (for example, < and >) to calculate the page number where a row with a focused key is located. This logic does not work if ODataStore is bound to a table with GUID keys. You need to set the autoNavigateToFocusedRow property to false or disable the remoteOperations property to ensure it operates correctly.

• Focused Row

Detaches all event handlers from a single event.

The object for which this method is called.

Detaches a particular event handler from a single event.

The event's name.

The event's handler.

The object for which this method is called.

Subscribes to an event.

The event's name.

The event's handler.

The object for which this method is called.

Use this method to subscribe to one of the events listed in the Events section.

Subscribes to events.

Events with their handlers: { "eventName1": handler1, "eventName2": handler2, ...}

The object for which this method is called.

Use this method to subscribe to several events with one method call. Available events are listed in the Events section.

Gets the value of a single property.

The property's name or full path.

Return Value: any

This property's value.

Updates the value of a single property.

The property's name or full path.

optionValue: any

This property's new value.

Updates the values of several properties.

Options with their new values.

Gets the total page count.

Gets the current page index.

Switches the UI component to a specific page using a zero-based index.

The zero-based page index.

Reloads data and repaints data rows.

refresh() calls dataSource.reload() and refreshes component properties such as selection and lookup column dataSources. This method also repaints all data rows if repaintChangesOnly is false (default).

DataGrid cannot track data source changes applied outside of the component. To update the component in such cases, call the refresh() method.

The following code snippet shows how to call refresh():

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>

• Calling the refresh() method in edit mode discards unsaved changes and cancels the edit mode. When editing.mode is "batch", the component cancels the edit mode but does not discard unsaved changes.
• refresh() does not repaint the editing popup when editing.mode is "popup".
• The component may reject the refresh promise if DataGrid accesses its dataSource while the promise is in progress. To avoid rejecting the refresh promise, modify properties that initiate data queries after refresh is completed.

• refresh(changesOnly)

Reloads data and repaints all or only updated data rows.

Pass true to repaint updated data rows; false to repaint all data rows.

Renders the component again without reloading data. Use the method to update the component's markup and appearance dynamically.

Repaints specific rows.

This method updates the row objects and their visual representation.

Resets a property to its default value.

Saves changes that a user made to data.

Seeks a search string in the columns whose allowSearch property is true.

A search string. Pass an empty string to clear search results.

Selects rows with specific keys.

The row keys.

Specifies whether previously selected rows should stay selected.

By default, this method call clears selection of previously selected rows. To keep these rows selected, call this method with true as the second argument.

widgetInstance.selectRows([5, 10, 12], true);

If you specify DataGrid's key as composite (for example, key: ['id', 'name']), you need to call this method as follows:

widgetInstance.selectRows([ { id: 5, name: 'Alex' }, { id: 10: name: 'Bob' } ], true);

View Demo

• Initial and Runtime Selection
• selectRowsByIndexes(indexes)

Selects rows with specific indexes.

View Demo

This method has the following specifics:

• This method call clears selection of all previously selected rows.
• When calculating row indexes, the UI component counts data and group rows. Nevertheless, only data rows can be selected.
• If the pager is used, selection is cleared once a user moves to a different page. To preserve it, call this method within the onContentReady handler.

• Initial and Runtime Selection

Shows the column chooser.

If the following conditions are met:

• You use state storing.

• columnChooser.enabled is set to false (default).

• You call this method.

Then, column chooser may not update data. To fix this issue, assign true to the columnChooser.enabled property. If you still want to hide the default column chooser icon, use the toolbar option.

• hideColumnChooser

Gets the current UI component state.

The current UI component state.

The following example shows how to save the UI component state in the local storage and load it from there:

$(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);
        }
    });
});

import { Component, ViewChild } from "@angular/core";
import { 
    DxDataGridModule, 
    DxButtonModule, 
    DxDataGridComponent 
} from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent
    // Prior to Angular 8
    // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent
    saveState() {
        const state = this.dataGrid.instance.state();
        // Saves the state in the local storage
        localStorage.setItem("dataGridState", JSON.stringify(state));
    }
    loadState() {
        const state = JSON.parse(localStorage.getItem("dataGridState"));
        this.dataGrid.instance.state(state);
    }
}
@NgModule({
    imports: [
        DxDataGridModule,
        DxButtonModule,
        // ...
    ],
    // ...
})

<dx-data-grid ...>
</dx-data-grid>
<dx-button
    text="Save State"
    (onClick)="saveState()">
</dx-button>
<dx-button
    text="Load State"
    (onClick)="loadState()">
</dx-button>

<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>
    );
}

• stateStoring

Sets the UI component state.

The UI component's state to be set. The state object will override the current state.

After the state is set, the DataGrid reloads data to apply sorting, filtering, and other data processing settings.

Refer to the state() method description for an example of how to work with the UI component state.

View Demo

• stateStoring

Gets the total row count.

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

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

import { Component } from '@angular/core';
import DataSource from "devextreme/data/data_source";

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})

export class AppComponent {
    totalCount: Number;
    dataSource: DataSource;
    constructor () {
        this.dataSource = new DataSource({
            store: customers,
            paginate: true
        });
    }

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

<dx-data-grid ...
    [dataSource]="dataSource"
    (onContentReady)="getTotalCount($event)"
>
    <dxo-paging [enabled]="true"> </dxo-paging>
</dx-data-grid>

<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;

• If a filter is applied, totalCount() returns the number of records after filtering.

• If scrolling.mode is "infinite", this method returns the number of loaded rows.

• If paging is disabled in the DataGrid (paging.enabled is false) or underlying DataSource (paginate is false), totalCount() returns -1. To get the total record count in this case, use the following code:

  jQuery

  const dataGrid = $("#dataGridContainer").dxDataGrid("instance");
  const dataSource = dataGrid.getDataSource();
  const recordCount = dataSource.items().length;

  Angular

  import { Component, ViewChild } from '@angular/core';
  import { DxDataGridComponent } from 'devextreme-angular';
  
  @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css']
  })
  export class AppComponent {
      @ViewChild('dataGridRef', { static: false }) dataGrid: DxDataGridComponent;
      // Prior to Angular 8
      // @ViewChild('dataGridRef') dataGrid: DxDataGridComponent;
      getRecordCount() {
          const dataSource = this.dataGrid.instance.getDataSource();
          return dataSource.items().length;
      }
  }

  <dx-data-grid ...
      #dataGridRef
  ></dx-data-grid>

  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  import { AppComponent } from './app.component';
  
  import { DxDataGridModule } from 'devextreme-angular';
  
  @NgModule({
      declarations: [
          AppComponent
      ],
      imports: [
          BrowserModule,
          DxDataGridModule
      ],
      providers: [ ],
      bootstrap: [AppComponent]
  })
  export class AppModule { }

  Vue

  <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
          }
      },
      computed: {
          dataGrid: function() {
              return this.$refs[dataGridRef].instance;
          }
      },
      methods: {
          getRecordCount() {
              const dataSource = this.dataGrid.getDataSource();
              return dataSource.items().length;
          }
      }
  }
  </script>

  React

  import React, { useRef, useCallback } 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 getRecordCount = useCallback(() => {
          const dataSource = dataGrid.current.instance().getDataSource();
          return dataSource.items().length;
      }, []);
      return (
          <DataGrid ref={dataGrid}>
              {/* ... */}
          </DataGrid>
      );
  }

Updates the UI component's content after resizing.

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