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:

itemMargin
Configures the margin between TileView items.
baseItemWidth/baseItemHeight
Specify the base width/height of TileView items.
height
Configures component height.
activeStateEnabled
Specifies if TileView items are clickable.

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