JavaScript/jQuery TileView - Getting Started
jQuery
Angular
Vue
React
TileView is a UI component that displays items in tiles.
This tutorial guides you through the following steps:
- Add a TileView to a page
- Specify an item template
- Customize TileView appearance
- Configure component properties
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:
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.
$(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.
<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.
<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.
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:
$(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:
<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:
<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:
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:
: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
$(function() { $('#tileview').dxTileView({ dataSource: tiles, itemMargin: 16, baseItemWidth: 280, baseItemHeight: 160, height: 368, activeStateEnabled: false, itemTemplate() { // ... } }); });
Angular
<dx-tile-view [dataSource]="tiles" [itemMargin]="16" [baseItemWidth]="280" [baseItemHeight]="160" [height]="368" [activeStateEnabled]="false" itemTemplate="tileTemplate" > <!-- ... --> </dx-tile-view>
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
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".