The TileView widget contains a collection of tiles. Tiles can store much more information than ordinary buttons, that is why they are very popular in apps designed for touch devices.

View Demo

The following code adds a primitive TileView to your page.

jQuery

HTML

JavaScript

<div id="tileViewContainer"></div>

$(function() {
    $("#tileViewContainer").dxTileView({
        dataSource: [
            { text: "Alabama" },
            { text: "Alaska" },
            { text: "Arizona" },
            // ...
        ]
    });
});

Angular

HTML

TypeScript

<dx-tile-view 
    [dataSource]="tileViewData">
</dx-tile-view>

import { DxTileViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    tileViewData = [
        { text: "Alabama" },
        { text: "Alaska" },
        { text: "Arizona" },
        // ...
    ];
}
@NgModule({
    imports: [
        // ...
        DxTileViewModule
    ],
    // ...
})

Vue

<template>
    <DxTileView :data-source="dataSource"/>
</template>

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

import { DxTileView } from 'devextreme-vue/tile-view';

export default {
    components: {
        DxTileView
    },
    data() {
        return {
            dataSource: [
                { text: 'Alabama' },
                { text: 'Alaska' },
                { text: 'Arizona' },
                // ...
            ]
        };
    }
}
</script>

React

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { TileView } from 'devextreme-react/tile-view';

const dataSource = [
    { text: 'Alabama' },
    { text: 'Alaska' },
    { text: 'Arizona' },
    // ...
];

class App extends React.Component {
    render() {
        return (
            <TileView dataSource={dataSource}/>
        );
    }
}

export default App;

Note that field names in these data source items are conventional. This provides a default tile appearance, which can be customized later.

By default, the widget is oriented horizontally, but you can orient it vertically using the direction option.

jQuery

JavaScript

$(function() {
    $("#tileViewContainer").dxTileView({
        // ...
        direction: "vertical"
    });
});

Angular

HTML

TypeScript

<dx-tile-view ...
    direction="vertical">
</dx-tile-view>

import { DxTileViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTileViewModule
    ],
    // ...
})

Vue

<template>
    <DxTileView direction="vertical"/>
</template>

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

import { DxTileView } from 'devextreme-vue/tile-view';

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

React

import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

import { TileView } from 'devextreme-react/tile-view';

class App extends React.Component {
    render() {
        return (
            <TileView direction="vertical"/>
        );
    }
}

export default App;

View Demo

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

General Information

.NET Subscription

Common Tools

Quality Assurance and Productivity

Desktop

Controls

Tools

Frameworks and Libraries

Web

Controls and Extensions

Tools

Maintenance Mode

Mobile

Enterprise and Analytic Tools

End-User Documentation

DevExtreme jQuery - Overview

jQuery

Angular

Vue

React

jQuery

Angular

Vue

React

See Also