All docs
V25.1
25.1
24.2
The page you are viewing does not exist in version 24.2.
24.1
The page you are viewing does not exist in version 24.1.
23.2
The page you are viewing does not exist in version 23.2.
23.1
The page you are viewing does not exist in version 23.1.
22.2
The page you are viewing does not exist in version 22.2.
22.1
The page you are viewing does not exist in version 22.1.
21.2
The page you are viewing does not exist in version 21.2.
21.1
The page you are viewing does not exist in version 21.1.
20.2
The page you are viewing does not exist in version 20.2.
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

JavaScript/jQuery TileView - Getting Started

jQuery
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Angular
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
Vue
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.
React
NOTE
Before you start the tutorial, ensure DevExtreme is installed in your application.

TileView is a UI component that displays items in tiles.

This tutorial guides you through the following steps:

The following live example demonstrates the result:

Each section in this tutorial describes a single configuration step. You can find the complete source code in the following GitHub repository:

View on GitHub

Create TileView and Assign a Data Source

jQuery

Add DevExtreme to your jQuery application and use the code below to create a TileView component. This example specifies the dataSource property to define items. You can also specify TileView items in the items[] array.

index.js
index.html
data.js
$(function() {
    $('#tileview').dxTileView({
        dataSource: tiles,
    });
});
<html>
    <head>
        <!-- ... -->
        <script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" href="https://cdn3.devexpress.com/jslib/25.1.4/css/dx.light.css">
        <script type="text/javascript" src="https://cdn3.devexpress.com/jslib/25.1.4/js/dx.all.js"></script>
        <script type="text/javascript" src="index.js"></script>
        <script type="text/javascript" src="data.js"></script>
    </head>
    <body>
        <div id="tileview"></div>
    </body>
</html>
const tiles = [{
    icon: 'datatrending',
    title: 'Boost Productivity',
    text: 'Tools and data that help you get the most from your team.',
}, ... ]
Angular

Add DevExtreme to your Angular application and use the code below to create a TileView component. This example specifies the dataSource property to define items. You can also specify TileView items in the items[] array.

app.component.html
app.component.ts
app.module.ts
data.ts
<dx-tile-view
    [dataSource]="tiles"
></dx-tile-view>
import { Component } from '@angular/core';
import { tiles } from './data';

export class AppComponent {
    // Create a local version of tiles to implement in app.component.html
    tiles = tiles;
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { DxTileViewModule } from 'devextreme-angular/ui/tile-view';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        AppRoutingModule,
        DxTileViewModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }
export const tiles = [{
    icon: 'datatrending',
    title: 'Boost Productivity',
    text: 'Tools and data that help you get the most from your team.',
}, ... ]
Vue

Add DevExtreme to your Vue application and use the code below to create a TileView component. This example specifies the dataSource property to define items. You can also specify TileView items in the items[] array.

App.vue
data.js
<script setup lang="ts">
    import { DxTileView } from 'devextreme-vue/tile-view';
    import { tiles } from '@/data.js';
</script>
<template>
    <DxTileView
        :data-source="tiles"
    ></DxTileView>
</template>
export const tiles = [{
    icon: 'datatrending',
    title: 'Boost Productivity',
    text: 'Tools and data that help you get the most from your team.',
}, ... ]
React

Add DevExtreme to your React application and use the code below to create a TileView component. This example specifies the dataSource property to define items. You can also specify TileView items in the items[] array.

App.tsx
data.js
import { TileView } from 'devextreme-react/tile-view';
import { tiles } from './data.js';

export default function App(): JSX.Element {
    return (
        <TileView
            dataSource={tiles}
        />
    );
}
const tiles = [{
    icon: 'datatrending',
    title: 'Boost Productivity',
    text: 'Tools and data that help you get the most from your team.',
}, ... ]

Specify an Item Template

jQuery

At this point, tiles display text defined in the items[].text property. To customize tile content, define templates. Specify items[].template to customize a specific item and itemTemplate to customize all items. This example uses the itemTemplate property:

index.js
$(function() {
    $('#tileview').dxTileView({
        dataSource: tiles,
        itemTemplate(itemData, itemIndex, itemElement) {
            const iconBox = $('<div>')
                .addClass('icon-box')
                .append(
                    $('<i>').addClass(`dx-icon-${itemData.icon}`),
                );

            const textBox = $('<div>')
                .addClass('text-box')
                .append(
                    $('<h3>')
                        .addClass('tile-title')
                        .text(itemData.title),
                    $('<p>')
                        .addClass('tile-text')
                        .text(itemData.text),
                );

            itemElement.append(iconBox);
            itemElement.append(textBox);
        },
    });
});
Angular

At this point, tiles display text defined in the items[].text property. To customize tile content, define templates. Specify items[].template to customize a specific item and itemTemplate to customize all items. This example uses the itemTemplate property:

app.component.html
<dx-tile-view
    [dataSource]="tiles"
    itemTemplate="tileTemplate"
>
    <div *dxTemplate="let data of 'tileTemplate'">
        <div class="icon-box">
            <i class="dx-icon-{{data.icon}}"></i>
        </div>
        <div class="text-box">
            <h3 class="tile-title">{{data.title}}</h3>
            <p class="tile-text">{{data.text}}</p>
        </div>
    </div>
</dx-tile-view>
Vue

At this point, tiles display text defined in the items[].text property. To customize tile content, define templates. Specify items[].template to customize a specific item and itemTemplate to customize all items. This example uses the itemTemplate property:

App.vue
<template>
    <DxTileView
        :data-source="tiles"
        item-template="tileTemplate"
    >
        <template #tileTemplate="data">
            <div class="icon-box">
                <i :class="`dx-icon-${data.data.icon}`"></i>
            </div>
            <div class="text-box">
                <h3 class="tile-title">{{ data.data.title }}</h3>
                <p class="tile-text">{{ data.data.text }}</p>
            </div>
        </template>
    </DxTileView>
</template>
React

At this point, tiles display text defined in the items[].text property. To customize tile content, define templates. Specify items[].render or items[].component to customize a specific item and itemRender or itemComponent to customize all items. This example uses the itemRender property:

App.tsx
function TileRender(data: { icon: string; title: string; text: string }): JSX.Element {
    return (
        <>
            <div className="icon-box">
                <i className={`dx-icon-${data.icon}`}></i>
            </div>
            <div className="text-box">
                <h3 className="tile-title">{data.title}</h3>
                <p className="tile-text">{data.text}</p>
            </div>
        </>
    );
}

export default function App(): JSX.Element {
    return (
        <TileView
            dataSource={tiles}
            itemRender={TileRender}
        />
    );
}

Customize TileView Appearance

To customize the appearance of TileView items, this example implements the following styles:

CSS
:root {
    color-scheme: dark;
}

.demo-container {
    height: 496px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dx-tile {
    border-radius: 8px;
    border-color: var(--dx-color-border);
}

.dx-tile-content {
    padding: 12px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    height: 100%;
}

.icon-box {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background-color: light-dark(#f0f0f0, #383838);
}

.text-box {
    margin-top: auto;
    height: 84px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

h3.tile-title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 4px;
}

.tile-text {
    margin: 0;
    height: 54px;
}

.icon-box i {
    font-size: 20px;
}

.dx-tile.dx-state-hover {
    border-color: var(--dx-color-border);
    background-color: light-dark(#f5f5f5, #3d3d3d);
}

.dx-state-focused {
    outline: 2px solid var(--dx-color-primary);
}

This application modifies DevExtreme CSS variables defined in the imported theme file (dx.fluent.blue.dark.css). To integrate support for dark and light themes, this example also implements the color-scheme CSS style and specifies multiple color styles using the light-dark() function.

Configure TileView Properties

This example specifies the following TileView properties:

jQuery
index.js
$(function() {
    $('#tileview').dxTileView({
        dataSource: tiles,
        itemMargin: 16,
        baseItemWidth: 280,
        baseItemHeight: 160,
        height: 368,
        activeStateEnabled: false,
        itemTemplate() {
            // ...
        }
    });
});
Angular
app.component.html
<dx-tile-view
    [dataSource]="tiles"
    [itemMargin]="16"
    [baseItemWidth]="280"
    [baseItemHeight]="160"
    [height]="368"
    [activeStateEnabled]="false"
    itemTemplate="tileTemplate"
>
    <!-- ... -->
</dx-tile-view>
Vue
App.vue
<template>
    <DxTileView
        :data-source="tiles"
        :item-margin="16"
        :base-item-width="280"
        :base-item-height="160"
        :height="368"
        :active-state-enabled="false"
        item-template="tileTemplate"
    >
        <!-- ... -->
    </DxTileView>
</template>
React
App.tsx
export default function App(): JSX.Element {
    return (
        <TileView
            dataSource={tiles}
            itemMargin={16}
            baseItemWidth={280}
            baseItemHeight={160}
            height={368}
            activeStateEnabled={false}
            itemRender={TileRender}
        />
    );
}

You can also configure the following properties to further customize the TileView component:

  • items[].widthRatio/items[].heightRatio
    Adjust an item's width/height. Set these properties to create tiles of different sizes.
  • onItemClick
    Configures a handler function for the ItemClickEvent.
  • direction
    Specifies TileView orientation.
  • showScrollbar
    Configures scrollbar visibility. The TileView scrollbar appears at the bottom of the component when direction is "horizontal" (default) and on the right when direction is "vertical".