All docs
V20.2
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

Overview

The TileView UI component 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 UI component is oriented horizontally, but you can orient it vertically using the direction property.

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

See Also