jQuery/JS Common - Object Structures

This section describes the structure of the objects that are used in API multiple times as function parameters or property values.

animationConfig

Defines animation properties.

import { animationConfig } from "devextreme/animation/fx"

Type:

Object

BarGaugeBarInfo

An object that provides information about a bar in the BarGauge UI component.

import { BarGaugeBarInfo } from "devextreme/viz/bar_gauge"

Type:

Object

BarGaugeLegendItem

An object that provides information about a legend item in the BarGauge UI component.

Type:

Object

BaseChartLegendItem

An object that provides information about a legend item in the Chart and PolarChart UI components.

import { BaseChartLegendItem } from "devextreme/viz/chart_components/base_chart"

Type:

Object

CellRange

The coordinates of the exported DataGrid in the Excel file.

import { CellRange } from "devextreme/excel_exporter"

Type:

Object

This object has the following structure:

{
    from: { row: 1, column: 1 }, 
    to: { row: 4, column: 4 }
}

Whereas columns in Excel are indexed with letters, the CellRange is specified using numeric values. In the code above, the range is A1-D4.

device

The device object defines the device on which the application is running.

import Device from "devextreme/core/devices"

Type:

Object

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.

dxDiagramAddShapeArgs

Contains information about the processed shape.

import { dxDiagramAddShapeArgs } from "devextreme/ui/diagram"

dxDiagramAddShapeFromToolboxArgs

Contains information about the processed shape.

import { dxDiagramAddShapeFromToolboxArgs } from "devextreme/ui/diagram"

dxDiagramBeforeChangeConnectorTextArgs

Contains information about the processed connector.

import { dxDiagramBeforeChangeConnectorTextArgs } from "devextreme/ui/diagram"

dxDiagramBeforeChangeShapeTextArgs

Contains information about the processed shape.

import { dxDiagramBeforeChangeShapeTextArgs } from "devextreme/ui/diagram"

dxDiagramChangeConnectionArgs

Contains information about the processed connection.

import { dxDiagramChangeConnectionArgs } from "devextreme/ui/diagram"

dxDiagramChangeConnectorPointsArgs

Contains information about the processed connector.

import { dxDiagramChangeConnectorPointsArgs } from "devextreme/ui/diagram"

dxDiagramChangeConnectorTextArgs

Contains information about the processed connector.

import { dxDiagramChangeConnectorTextArgs } from "devextreme/ui/diagram"

dxDiagramChangeShapeTextArgs

Contains information about the processed shape.

import { dxDiagramChangeShapeTextArgs } from "devextreme/ui/diagram"

dxDiagramConnector

An object that provides information about a connector in the Diagram UI component.

import { dxDiagramConnector } from "devextreme/ui/diagram"

dxDiagramCustomCommand

An object that provides information about a custom command in the Diagram UI component.

import { dxDiagramCustomCommand } from "devextreme/ui/diagram"

dxDiagramDeleteConnectorArgs

Contains information about the processed connector.

import { dxDiagramDeleteConnectorArgs } from "devextreme/ui/diagram"

dxDiagramDeleteShapeArgs

Contains information about the processed shape.

import { dxDiagramDeleteShapeArgs } from "devextreme/ui/diagram"

dxDiagramItem

An object that provides information about an item (shape or connector) in the Diagram UI component.

dxDiagramMoveShapeArgs

Contains information about the processed shape.

import { dxDiagramMoveShapeArgs } from "devextreme/ui/diagram"

dxDiagramResizeShapeArgs

Contains information about the processed shape.

import { dxDiagramResizeShapeArgs } from "devextreme/ui/diagram"

dxDiagramShape

An object that provides information about a shape in the Diagram UI component.

import { dxDiagramShape } from "devextreme/ui/diagram"

dxSchedulerAppointment

An object that describes an appointment in the Scheduler UI component.

Type:

Object

dxSchedulerTimeZone

A time zone object.

import { dxSchedulerTimeZone } from "devextreme/time_zone_utils"

EventObject

Describes EventObject, a counterpart of the jQuery.Event to be used without jQuery.

import { EventObject } from "devextreme/events/index"

Type:

Object

ExcelDataGridCell

A DataGrid cell to be exported to Excel.

Type:

Object

ExcelExportDataGridProps

Properties that can be passed to the exportDataGrid(options) method from the excelExporter module.

import { ExcelExportDataGridProps } from "devextreme/excel_exporter"

ExcelExportPivotGridProps

Properties that can be passed to the exportPivotGrid(options) method from the excelExporter module.

import { ExcelExportPivotGridProps } from "devextreme/excel_exporter"

ExcelFont

An object that configures the font in an Excel cell.

import { ExcelFont } from "devextreme/exporter/excel/excel.doc_comments"

Type:

Object

ExcelPivotGridCell

A PivotGrid cell to be exported to Excel.

Type:

Object

FileSystemError

An object that contains information about the error.

import FileSystemError from "devextreme/file_management/error"

jQuery

index.js

fileSystem.js

const objectProvider = new DevExpress.fileManagement.ObjectFileSystemProvider({ data: fileSystem });
const keepExtensionsProvider = new DevExpress.fileManagement.CustomFileSystemProvider({
    getItems: function(item) {
        return objectProvider.getItems(item);
    },
    renameItem: function(item, newName) {
        return new Promise((resolve, reject) => {
            if(item.getFileExtension() !== getExtension(newName)) {
                // 1 - reject
                reject(new DevExpress.fileManagement.FileSystemError(5, item, "You cannot change the file extension."));
                // 2 - throw
                // throw new DevExpress.fileManagement.FileSystemError(5, item, "You cannot change the file extension.");
            } else {
                resolve(objectProvider.renameItem(item, newName));
            }
        });
    }
});
const getExtension = function(path) {
    const index = path.lastIndexOf(".");
    return index !== -1 ? path.substr(index) : "";
}

$("#file-manager").dxFileManager({ 
    fileSystemProvider: keepExtensionsProvider,
    permissions: { rename: true }
});

var fileSystem = [
    {
        name: "Documents",
        isDirectory: true,
        items: [
            {
                name: "Projects",
                isDirectory: true,
                items: [
                    {
                        name: "About.rtf",
                        isDirectory: false,
                        size: 1024
                    },
                    {
                        name: "Passwords.rtf",
                        isDirectory: false,
                        size: 2048
                    }
                ]
            },
            {
                name: "About.xml",
                isDirectory: false,
                size: 1024
            },
            {
                name: "Managers.rtf",
                isDirectory: false,
                size: 2048
            },
            {
                name: "ToDo.txt",
                isDirectory: false,
                size: 3072
            }
        ],
    },
    {
        name: "Images",
        isDirectory: true,
        items: [
            {
                name: "logo.png",
                isDirectory: false,
                size: 20480
            },
            {
                name: "banner.gif",
                isDirectory: false,
                size: 10240
            }
        ]
    },
    {
        name: "System",
        isDirectory: true,
        items: [
            {
                name: "Employees.txt",
                isDirectory: false,
                size: 3072
            },
            {
                name: "PasswordList.txt",
                isDirectory: false,
                size: 5120
            }
        ]
    },
    {
        name: "Description.rtf",
        isDirectory: false,
        size: 1024
    },
    {
        name: "Description.txt",
        isDirectory: false,
        size: 2048
    }
];

Angular

app.component.html

app.component.ts

app.module.ts

app.service.ts

<dx-file-manager id="fileManager">
    [fileSystemProvider]="keepExtensionsProvider">
    <dxo-permissions rename="true">
    </dxo-permissions>
    <!-- ... -->
</dx-file-manager>

import { Component } from '@angular/core';
import ObjectFileSystemProvider from 'devextreme/file_management/object_provider';
import CustomFileSystemProvider from 'devextreme/file_management/custom_provider';
import FileSystemError from 'devextreme/file_management/error';
import { Service, FileItem } from "./app.service";

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

export class AppComponent {
    fileItems: FileItem[];
    objectProvider: ObjectFileSystemProvider;
    keepExtensionsProvider: CustomFileSystemProvider;

    constructor(service: Service) {
        this.fileItems = service.getFileItems();
        this.objectProvider = new ObjectFileSystemProvider({
            data: this.fileItems
        });
        this.keepExtensionsProvider = new CustomFileSystemProvider({
            getItems: (parentDir) => this.getItems(parentDir),
            renameItem: (item, newName) => this.renameItem(item, newName)
        });
    }      
    getItems(item) {
        return this.objectProvider.getItems(item);
    }
    renameItem(item, newName) {
        return new Promise<any>((resolve, reject) => {
        if(item.getFileExtension() !== this.getExtension(newName)) {
            // 1 - reject
            reject(new FileSystemError(5, item, "You cannot change the file extension."));
            // 2 - throw
            // throw new FileSystemError(5, item, "You cannot change the file extension.");
        } else {
            resolve(this.objectProvider.renameItem(item, newName));
        }
        });
    }
    getExtension(path) {
        const index = path.lastIndexOf(".");
        return index !== -1 ? path.substr(index) : "";
    }
}

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

@NgModule({
    imports: [
        // ...
        DxFileManagerModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }

import { Injectable } from '@angular/core';

export class FileItem {
    name: string;
    isDirectory: boolean;
    size?: number;
    items?: FileItem[];
}

let fileItems: FileItem[] = [{
    'name': 'Documents',
    'isDirectory': true,
    'items': [{
        'name': 'Projects',
        'isDirectory': true,
        'items': [{
            'name': 'About.rtf',
            'isDirectory': false,
            'size': 1024
        }, {
            'name': 'Passwords.rtf',
            'isDirectory': false,
            'size': 2048
        }]
    }, {
        'name': 'About.xml',
        'isDirectory': false,
        'size': 1024
    }, {
        'name': 'Managers.rtf',
        'isDirectory': false,
        'size': 2048
    }, {
        'name': 'ToDo.txt',
        'isDirectory': false,
        'size': 3072
    }],
}, {
    'name': 'Images',
    'isDirectory': true,
    'items': [{
        'name': 'logo.png',
        'isDirectory': false,
        'size': 20480
    }, {
        'name': 'banner.gif',
        'isDirectory': false,
        'size': 10240
    }]
}, {
    'name': 'System',
    'isDirectory': true,
    'items': [{
        'name': 'Employees.txt',
        'isDirectory': false,
        'size': 3072
    }, {
        'name': 'PasswordList.txt',
        'isDirectory': false,
        'size': 5120
    }]
}, {
    'name': 'Description.rtf',
    'isDirectory': false,
    'size': 1024
}, {
    'name': 'Description.txt',
    'isDirectory': false,
    'size': 2048
}];

@Injectable()
export class Service {
    getFileItems(): FileItem[] {
        return fileItems;
    }
}

Vue

App.vue

data.js

<template>
    <DxFileManager :file-system-provider="keepExtensionsProvider">
        <DxPermissions :rename="true" />
    </DxFileManager>
</template>

<script>
    import ObjectFileSystemProvider from "devextreme/file_management/object_provider";
    import CustomFileSystemProvider from "devextreme/file_management/custom_provider";
    import FileSystemError from "devextreme/file_management/error";
    import { DxFileManager, DxPermissions } from "devextreme-vue/file-manager";
    import { fileItems } from "./data.js";
    export default {
        components: {
            DxFileManager,
            DxPermissions,
        },
        data() {
            return {
                objectProvider: new ObjectFileSystemProvider({ data: fileItems }),
                keepExtensionsProvider: new CustomFileSystemProvider({
                    getItems: (parentDir) => this.getItems(parentDir),
                    renameItem: (item, newName) => this.renameItem(item, newName),
                }),
                };
            },
            methods: {
                getItems(parentDir) {
                    return this.objectProvider.getItems(parentDir);
                },
                renameItem(item, newName) {
                    return new Promise((resolve, reject) => {
                        if(item.getFileExtension() !== this.getExtension(newName)) {
                            // 1 - reject
                            reject(new FileSystemError(5, item, "You cannot change the file extension."));
                            // 2 - throw
                            // throw new FileSystemError(5, item, "You cannot change the file extension.");
                        } else {
                            resolve(this.objectProvider.renameItem(item, newName));
                        }
                    });
                },
            },
        },
    };
</script>

export const fileItems = [{
  'name': 'Documents',
  'isDirectory': true,
  'items': [{
    'name': 'Projects',
    'isDirectory': true,
    'items': [{
      'name': 'About.rtf',
      'isDirectory': false,
      'size': 1024
    }, {
      'name': 'Passwords.rtf',
      'isDirectory': false,
      'size': 2048
    }]
  }, {
    'name': 'About.xml',
    'isDirectory': false,
    'size': 1024
  }, {
    'name': 'Managers.rtf',
    'isDirectory': false,
    'size': 2048
  }, {
    'name': 'ToDo.txt',
    'isDirectory': false,
    'size': 3072
  }],
}, {
  'name': 'Images',
  'isDirectory': true,
  'items': [{
    'name': 'logo.png',
    'isDirectory': false,
    'size': 20480
  }, {
    'name': 'banner.gif',
    'isDirectory': false,
    'size': 10240
  }]
}, {
  'name': 'System',
  'isDirectory': true,
  'items': [{
    'name': 'Employees.txt',
    'isDirectory': false,
    'size': 3072
  }, {
    'name': 'PasswordList.txt',
    'isDirectory': false,
    'size': 5120
  }]
}, {
  'name': 'Description.rtf',
  'isDirectory': false,
  'size': 1024
}, {
  'name': 'Description.txt',
  'isDirectory': false,
  'size': 2048
}];

React

App.js

data.js

import React from "react";
import ObjectFileSystemProvider from "devextreme/file_management/object_provider";
import CustomFileSystemProvider from "devextreme/file_management/custom_provider";
import FileSystemError from "devextreme/file_management/error";
import FileManager, { Permissions } from "devextreme-react/file-manager";
import { fileItems } from "./data.js";

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

const objectProvider = new ObjectFileSystemProvider({
    data: fileItems
});

const keepExtensionsProvider = new CustomFileSystemProvider({
    getItems: (parentDir) => getItems(parentDir),
    renameItem: (item, newName) => renameItem(item, newName),
});

function getItems(parentDir) {
    return objectProvider.getItems(parentDir);
};

function renameItem(item, newName) {
    return new Promise((resolve, reject) => {
    if(item.getFileExtension() !== getExtension(newName)) {
        // 1 - reject
        reject(new FileSystemError(5, item, "You cannot change the file extension."));
        // 2 - throw
        // throw new FileSystemError(5, item, "You cannot change the file extension.");
    } else {
        resolve(objectProvider.renameItem(item, newName));
    }
    });
};

function getExtension(path) {
    const index = path.lastIndexOf(".");
    return index !== -1 ? path.substr(index) : "";
};

const App = () => {
    return (
        <FileManager 
            fileSystemProvider={keepExtensionsProvider}>
            <Permissions rename={true}></Permissions>
        </FileManager>
    );
};

export default App;

export const fileItems = [{
  'name': 'Documents',
  'isDirectory': true,
  'items': [{
    'name': 'Projects',
    'isDirectory': true,
    'items': [{
      'name': 'About.rtf',
      'isDirectory': false,
      'size': 1024
    }, {
      'name': 'Passwords.rtf',
      'isDirectory': false,
      'size': 2048
    }]
  }, {
    'name': 'About.xml',
    'isDirectory': false,
    'size': 1024
  }, {
    'name': 'Managers.rtf',
    'isDirectory': false,
    'size': 2048
  }, {
    'name': 'ToDo.txt',
    'isDirectory': false,
    'size': 3072
  }],
}, {
  'name': 'Images',
  'isDirectory': true,
  'items': [{
    'name': 'logo.png',
    'isDirectory': false,
    'size': 20480
  }, {
    'name': 'banner.gif',
    'isDirectory': false,
    'size': 10240
  }]
}, {
  'name': 'System',
  'isDirectory': true,
  'items': [{
    'name': 'Employees.txt',
    'isDirectory': false,
    'size': 3072
  }, {
    'name': 'PasswordList.txt',
    'isDirectory': false,
    'size': 5120
  }]
}, {
  'name': 'Description.rtf',
  'isDirectory': false,
  'size': 1024
}, {
  'name': 'Description.txt',
  'isDirectory': false,
  'size': 2048
}];

ASP.NET MVC Controls

Razor C#

fileSystem.js

@(Html.DevExtreme().FileManager()
    .FileSystemProvider(provider => provider
        .Custom()
        .GetItems("getItems")
        .RenameItem("renameItem"))
    .Permissions(permissions => permissions.Rename(true))
)
<script src="~/fileSystem.js"></script>
<script>
    const objectProvider = new DevExpress.fileManagement.ObjectFileSystemProvider({ data: fileSystem });

    function getItems(item) {
        return objectProvider.getItems(item);

    }
    function renameItem(item, newName) {
        return new Promise((resolve, reject) => {
            if(item.getFileExtension() !== getExtension(newName)) {
                // 1 - reject
                reject(new DevExpress.fileManagement.FileSystemError(5, item, "You cannot change the file extension."));
                // 2 - throw
                // throw new DevExpress.fileManagement.FileSystemError(5, item, "You cannot change the file extension.");
            } else {
                resolve(objectProvider.renameItem(item, newName));
            }
        });
    }
    function getExtension(path) {
        const index = path.lastIndexOf(".");
        return index !== -1 ? path.substr(index) : "";
    }
</script>

var fileSystem = [
    {
        name: "Documents",
        isDirectory: true,
        category: "Work",
        items: [
            {
                name: "Projects",
                isDirectory: true,
                category: "Work",
                items: [
                    {
                        name: "About.rtf",
                        isDirectory: false,
                        size: 1024
                    },
                    {
                        name: "Passwords.rtf",
                        isDirectory: false,
                        category: "Important",
                        size: 2048
                    }
                ]
            },
            {
                name: "About.xml",
                isDirectory: false,
                size: 1024
            },
            {
                name: "Managers.rtf",
                isDirectory: false,
                size: 2048
            },
            {
                name: "ToDo.txt",
                isDirectory: false,
                size: 3072
            }
        ],
    },
    {
        name: "Images",
        isDirectory: true,
        category: "Home",
        items: [
            {
                name: "logo.png",
                isDirectory: false,
                size: 20480
            },
            {
                name: "banner.gif",
                isDirectory: false,
                size: 10240
            }
        ]
    },
    {
        name: "System",
        isDirectory: true,
        category: "Important",
        items: [
            {
                name: "Employees.txt",
                isDirectory: false,
                category: "Important",
                size: 3072
            },
            {
                name: "PasswordList.txt",
                isDirectory: false,
                category: "Important",
                size: 5120
            }
        ]
    },
    {
        name: "Description.rtf",
        isDirectory: false,
        size: 1024
    },
    {
        name: "Description.txt",
        isDirectory: false,
        size: 2048
    }
];

FileSystemItem

An object that provides information about a file system item (file or folder) in the FileManager UI component.

import FileSystemItem from "devextreme/file_management/file_system_item"

format

Formats values.

import { format } from "devextreme/ui/widget/ui.widget"

Type:

String

|

Function

|

Object

Function parameters:

value:

Number

|

Date

The value to be formatted.

Return Value:

String

The value after formatting.

Default Value: undefined

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:

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

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

format: { 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 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.

format: { skeleton: 'GyMMMd' }

View Demo

FunnelLegendItem

An object that provides information about a legend item in the Funnel UI component.

Type:

Object

globalConfig

Specifies settings that affect all DevExtreme UI components.

import globalConfig from "devextreme/core/config"

Type:

Object

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,
    //...
});

PdfDataGridCell

A DataGrid cell to be exported to PDF.

import { PdfDataGridCell } from "devextreme/pdf_exporter"

Type:

Object

PdfExportDataGridProps

Properties that can be passed as a parameter to the exportDataGrid(options) method from the pdfExporter module.

import { PdfExportDataGridProps } from "devextreme/pdf_exporter"

PieChartLegendItem

An object that provides information about a legend item in the PieChart UI component.

Type:

Object

positionConfig

Configures the position of an overlay element.

import { positionConfig } from "devextreme/animation/position"

Type:

Object

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

index.js

$(function() {
    $("#popupContainer").dxPopup({
        // ...
        position: {
            my: "left",
            at: "right",
            of: "#target"
        }
    });
});

Angular

app.component.html

<dx-popup ... >
    <dxo-position
        my="left"
        at="right"
        of="#target">
    </dxo-position>
</dx-popup>

Vue

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

App.js

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

A template notation used to specify templates for UI component elements.

import { template } from "devextreme/core/templates/template"

Type:

String

|

Function

|

HTMLElement | jQuery

Templates are passed as properties that end with ...Template (in jQuery, Angular, and Vue) or ...Render/...Component (in React).

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 of data, 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:

jQuery

index.js

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

app.component.html

app.component.ts

app.module.ts

<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

App.vue

<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

App.js

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;

NOTE

Declare named templates within the component's markup but outside the templated element. Non-named templates should be declared inside the templated element.

Collection UI components also support templates for individual items. Do not specify the UI component's dataSource property if you use individual templates.

jQuery

index.js

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

app.component.html

app.module.ts

<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

App.vue

<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

App.js

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;

UploadInfo

An object that provides information about the file upload session.

import UploadInfo from "devextreme/file_management/upload_info"

VectorMapLegendItem

An object that provides information about a legend item in the VectorMap UI component.

Type:

Object

jQuery/JS Common - Object Structures

See Also

See Also

ExcelFont Deprecated

jQuery

Angular

Vue

React

ASP.NET MVC Controls

See Also

See Also

jQuery

Angular

Vue

React

template

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also

See Also

ExcelFont