React Common - Object Structures
This section describes the structure of the objects that are used in API multiple times as function parameters or property values.
device
This object is returned by the DevExpress.devices.current() and DevExpress.devices.real() methods to provide information on the device on which the application is currently running. Use the fields of this object to get the required information on the device.
You can emulate as if the application runs on another device. For this purpose, use the DevExpress.devices.current() function passing the required device object as a parameter.
The information on the device on which the application is currently running is used to provide an appropriate look and feel for the application. In particular, the styles that are most appropriate for the current device will be applied.
EventObject
Describes EventObject, a counterpart of the jQuery.Event to be used without jQuery.
ExcelExportDataGridProps
Properties that can be passed to the exportDataGrid(options) method from the excelExporter module.
ExcelExportPivotGridProps
Properties that can be passed to the exportPivotGrid(options) method from the excelExporter module.
format
This property accepts three types of values:
String
A predefined format or custom format string.Function
Applies a custom format to a value and returns this value as a string. A shortcut for the formatter property.Object
Allows you to configure the format. Can have one of the following structures:DevExtreme// Uses a predefined format format: { type: String, // one of the predefined formats precision: Number, // the precision of values currency: String // a specific 3-letter code for the "currency" format }
or
DevExtreme// Specifies a custom format format: { formatter: Function, // a custom formatting function parser: Function // a parsing function for string values }
You can specify the Intl NumberFormat's and DateTimeFormat's
options
parameter fields:Intlformat: { year: "2-digit", month: "narrow", day: "2-digit" } === or === format: { style: "currency", currency: "EUR", useGrouping: true }
If you use Globalize, you can use the fields that the numberFormatter, currencyFormatter, and dateFormatter accept instead of the fields described in this section. For example, you can use skeletons to format dates. Note that this approach can require additional CLDR modules not shipped with the DevExtreme package.
Globalizeformat: { skeleton: 'GyMMMd' }
NOTEDepending on the object structure, the format utility chooses the mechanism to use: DevExtreme internal, Intl, or Globalize. If you mix properties from different zones (DevExtreme, Intl, or Globalize) in an object, the result can be unpredictable.
globalConfig
Pass this object to the DevExpress.config(globalConfig) method to apply these setting, or call the same method without arguments to get the object with current settings.
DevExpress.config({ rtlEnabled: true, forceIsoDateParsing: false, //... });
PdfCell
An object that configures export to PDF settings in a DataGrid cell.
The customDrawCell and customizeCell functions use this object.
jQuery
$(function(){ $('#exportButton').dxButton({ // ... onClick: function() { const doc = new jsPDF(); DevExpress.pdfExporter.exportDataGrid({ jsPDFDocument: doc, component: dataGrid, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.font = { size: 20 }; } } }).then(function() { doc.save('Customers.pdf'); }); } }); const dataGrid = $('#gridContainer').dxDataGrid({ // ... }).dxDataGrid('instance'); });
Angular
<dx-button ... (onClick)="exportGrid($event)"> </dx-button> <dx-data-grid ... > <!-- ... --> </dx-data-grid>
import { Component } from '@angular/core'; import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter'; import { jsPDF } from 'jspdf'; import 'jspdf-autotable'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent; exportGrid() { const doc = new jsPDF(); exportDataGridToPdf({ jsPDFDocument: doc, component: this.dataGrid.instance, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.font = { size: 20 }; } } }).then(() => { doc.save('Customers.pdf'); }) } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxDataGridModule, DxButtonModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxDataGridModule, DxButtonModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
<template> <div> <DxButton ... @click="exportGrid()" /> <DxDataGrid ... :ref="dataGridRef"> <!-- ... --> </DxDataGrid> </div> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxDataGrid from 'devextreme-vue/data-grid'; import DxButton from 'devextreme-vue/button'; import { jsPDF } from 'jspdf'; import 'jspdf-autotable'; import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter'; const dataGridRef = 'dataGrid'; export default { components: { DxDataGrid, DxButton }, data() { return { dataGridRef }; }, computed: { dataGrid: function() { return this.$refs[dataGridRef].instance; } }, methods: { exportGrid() { const doc = new jsPDF(); exportDataGridToPdf({ jsPDFDocument: doc, component: this.dataGrid, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.font = { size: 20 }; } } }).then(() => { doc.save('Customers.pdf'); }); } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import DataGrid from 'devextreme-react/data-grid'; import Button from 'devextreme-react/button'; import { jsPDF } from 'jspdf'; import 'jspdf-autotable'; import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter'; const App = () => { const dataGridRef = useRef(null); function exportGrid() { const doc = new jsPDF(); const dataGrid = dataGridRef.current.instance; exportDataGridToPdf({ jsPDFDocument: doc, component: dataGrid, customizeCell: function(options) { const { gridCell, pdfCell } = options; if(gridCell.rowType === 'data') { pdfCell.font = { size: 20 }; } } }).then(() => { doc.save('Customers.pdf'); }); } return ( <React.Fragment> <Button ... onClick={exportGrid} /> <DataGrid ... ref={dataGridRef}> {/* ... */} </DataGrid> </React.Fragment> ); } export default App;
PdfExportDataGridProps
Properties that can be passed as a parameter to the exportDataGrid(options) method from the pdfExporter module.
The exportDataGrid(options) method requires the jsPDF v2.3.1+ library to export data and create PDF files.
jQuery
$(function(){ $('#exportButton').dxButton({ // ... onClick: function() { const doc = new jsPDF(); DevExpress.pdfExporter.exportDataGrid({ jsPDFDocument: doc, component: dataGrid }).then(function() { doc.save('Customers.pdf'); }); } }); const dataGrid = $('#gridContainer').dxDataGrid({ // ... }).dxDataGrid('instance'); });
<head> <!-- ... --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.0.0/jspdf.umd.min.js"></script> <!-- DevExtreme sources are referenced here --> </head>
Angular
<dx-button ... (onClick)="exportGrid($event)"> </dx-button> <dx-data-grid ... > <!-- ... --> </dx-data-grid>
import { Component } from '@angular/core'; import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter'; import { jsPDF } from 'jspdf'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent; exportGrid() { const doc = new jsPDF(); exportDataGridToPdf({ jsPDFDocument: doc, component: this.dataGrid.instance }).then(() => { doc.save('Customers.pdf'); }) } }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxDataGridModule, DxButtonModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxDataGridModule, DxButtonModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
<template> <div> <DxButton ... @click="exportGrid()" /> <DxDataGrid ... :ref="dataGridRef"> <!-- ... --> </DxDataGrid> </div> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxDataGrid from 'devextreme-vue/data-grid'; import DxButton from 'devextreme-vue/button'; import { jsPDF } from 'jspdf'; import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter'; const dataGridRef = 'dataGrid'; export default { components: { DxDataGrid, DxButton }, data() { return { dataGridRef }; }, computed: { dataGrid: function() { return this.$refs[dataGridRef].instance; } }, methods: { exportGrid() { const doc = new jsPDF(); exportDataGridToPdf({ jsPDFDocument: doc, component: this.dataGrid }).then(() => { doc.save('Customers.pdf'); }); } } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import DataGrid from 'devextreme-react/data-grid'; import Button from 'devextreme-react/button'; import { jsPDF } from 'jspdf'; import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter'; export default function App() { const dataGridRef = useRef(null); function exportGrid() { const doc = new jsPDF(); const dataGrid = dataGridRef.current.instance; exportDataGridToPdf({ jsPDFDocument: doc, component: dataGrid }).then(() => { doc.save('Customers.pdf'); }); } return ( <React.Fragment> <div> <Button ... onClick={exportGrid} /> <DataGrid ... ref={dataGridRef} > {/* ... */} </DataGrid> </div> </React.Fragment> ); }
PdfExportGanttProps
Properties that you can pass as a parameter to the exportGantt(options) method from the pdfExporter module.
positionConfig
Assign this object to the position property of an overlay UI component (Popup, Popover, Tooltip, etc.).
To position an element, specify the my, at, and of properties. In the following code, the Popup UI component's left side is aligned with the target's right side. This configuration reads as follows: "place my left side at the right side of the #target element."
jQuery
$(function() { $("#popupContainer").dxPopup({ // ... position: { my: "left", at: "right", of: "#target" } }); });
Angular
<dx-popup ... > <dxo-position my="left" at="right" of="#target"> </dxo-position> </dx-popup>
Vue
<template> <DxPopup ... > <DxPosition my="left" at="right" of="#target" /> </DxPopup> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxPopup, { DxPosition } from 'devextreme-vue/popup'; export default { components: { DxPopup, DxPosition } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import Popup, { Position } from 'devextreme-react/popup'; class App extends React.Component { render() { return ( <Popup ... > <Position my="left" at="right" of="#target" /> </Popup> ); } } export default App;
You can use the offset property to further adjust the position.
Possible positions are limited by the Window. To limit them by another element, specify the boundary property. If actual boundaries should be narrower or wider than the boundary element, set the boundaryOffset.
When a specified position exceeds the boundaries, a collision occurs. Use the collision property to specify how such collisions should be resolved.
template
jQuery
Templates are passed as properties that end with ...Template. Each template has access to the following parameters:
data
A data source object or an object with fields specific to a particular template. For information on the contents ofdata
, refer to the Template Data section of the template's API reference article.index
A zero-based index of the item in the collection. Available only in collection UI component templates.element
A jQuery element that represents the UI component element being customized. Available only if you use jQuery.
The following code shows how to declare a template and use these parameters. This code declares an itemTemplate for the List UI component:
$(function() { $("#listContainer").dxList({ items: [ { itemProperty: "someValue" }, // ... ], itemTemplate: function (data, index, element) { return index + " - " + data.itemProperty; // ===== or using the "element" parameter ===== const $item = $("<div>").text( index + " - " + data.itemProperty ); element.append($item); } }); });
Angular
Templates are passed as properties that end with ...Template. Each template has access to the following parameters:
data
A data source object or an object with fields specific to a particular template. For information on the contents ofdata
, refer to the Template Data section of the template's API reference article.index
A zero-based index of the item in the collection. Available only in collection UI component templates.
The following code shows how to declare a template and use these parameters. This code declares an itemTemplate for the List UI component:
<dx-list [items]="listData" itemTemplate="list-item"> <div *dxTemplate="let data of 'list-item'; let index = index"> {{index}} - {{data.itemProperty}} </div> </dx-list>
import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { listData = [ { itemProperty: "someValue" }, // ... ] }
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxListModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxListModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
Templates are passed as properties that end with ...Template. Each template has access to the following parameters:
data
A data source object or an object with fields specific to a particular template. For information on the contents ofdata
, refer to the Template Data section of the template's API reference article.index
A zero-based index of the item in the collection. Available only in collection UI component templates.
The following code shows how to declare a template and use these parameters. This code declares an itemTemplate for the List UI component:
<template> <DxList :items="listData" item-template="list-item"> <template #list-item="{ data, index }"> {{ index }} - {{ data.itemProperty }} </template> </DxList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxList from 'devextreme-vue/list'; export default { components: { DxList }, data() { return { listData: [ { itemProperty: 'someValue' }, // ... ] } } } </script>
React
Templates are passed as properties that end with ...Render or ...Component. Each template has access to the following parameters:
data
A data source object or an object with fields specific to a particular template. For information on the contents ofdata
, refer to the Template Data section of the template's API reference article.index
A zero-based index of the item in the collection. Available only in collection UI component templates.
The following code shows how to declare a template and use these parameters. This code declares an itemRender for the List UI component:
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import List from 'devextreme-react/list'; const renderListItem = (data, index) => { return ( <div>{index} - {data.itemProperty}</div> ); } class App extends React.Component { listData = [ { itemProperty: 'someValue' }, // ... ]; render() { return ( <List items={this.listData} itemRender={renderListItem} /> ); } } export default App;
Collection UI components also support templates for individual items. Do not specify the UI component's dataSource property if you use individual templates.
jQuery
$(function() { $("#listContainer").dxList({ items: [{ template: function () { return $("<i>").text("Item 1") } }, { template: function () { return $("<b>").text("Item 2") } },{ template: function () { return $("<div>").append( $("<span>").text("Item with nested component"), $("<div>").dxButton({ text: "Click me" }) ) } }] }); });
Angular
Declare named templates within the component's markup but outside the templated element. Non-named templates should be declared inside the templated element.
<dx-list> <dxi-item> <i>Item 1</i> </dxi-item> <dxi-item> <b>Item 2</b> </dxi-item> <dxi-item> <div *dxTemplate> Item with a nested component <dx-button text="Click me"></dx-button> </div> </dxi-item> </dx-list>
import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; import { DxListModule, DxButtonModule } from 'devextreme-angular'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, DxListModule, DxButtonModule ], providers: [ ], bootstrap: [AppComponent] }) export class AppModule { }
Vue
Declare named templates within the component's markup but outside the templated element. Non-named templates should be declared inside the templated element.
<template> <DxList> <DxItem> <template #default> <i>Item 1</i> </template> </DxItem> <DxItem> <template #default> <i>Item 2</i> </template> </DxItem> <DxItem> <template #default> <div> Item with a nested component <DxButton text="Click me" /> </div> </template> </DxItem> </DxList> </template> <script> import 'devextreme/dist/css/dx.light.css'; import DxList, { DxItem } from 'devextreme-vue/list'; import DxButton from 'devextreme-vue/button'; export default { components: { DxList, DxItem, DxButton } } </script>
React
import React from 'react'; import 'devextreme/dist/css/dx.light.css'; import List, { Item } from 'devextreme-react/list'; import Button from 'devextreme-react/button'; class App extends React.Component { render() { return ( <List> <Item> <i>Item 1</i> </Item> <Item> <i>Item 2</i> </Item> <Item> Item with a nested component <Button text="Click me" /> </Item> </List> ); } } export default App;
Angular
See Also
Vue
See Also
React
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.