DevExtreme React - Customize Tile Appearance
For a minor customization of tiles, you can use the default item template. This template defines the appearance of a tile depending on whether specific fields are present or absent from the tile's data object. For example, the following code generates three tiles: the first is disabled, the second is not customized, the third is hidden.
jQuery
$(function() { $("#tileViewContainer").dxTileView({ dataSource: [ { text: "Alabama", disabled: true }, { text: "Alaska" }, { text: "Arizona", visible: false } ] }); });
Angular
import { DxTileViewModule } from "devextreme-angular"; // ... export class AppComponent { tileViewData = [ { text: "Alabama", disabled: true }, { text: "Alaska" }, { text: "Arizona", visible: false } ]; } @NgModule({ imports: [ // ... DxTileViewModule ], // ... })
<dx-tile-view [dataSource]="tileViewData"> </dx-tile-view>
Using the default item template is the easiest way to customize an item, but it lacks flexibility. Instead, you can define a custom template. For Angular, AngularJS and Knockout apps, DevExtreme provides a markup component called dxTemplate. The following code gives a simple example of how you can use dxTemplate to customize tiles.
Angular
<dx-tile-view [dataSource]="tileViewData" [itemMargin]="15" [baseItemHeight]="80" [baseItemWidth]="140" itemTemplate="tile"> <div class="tile" *dxTemplate="let data of 'tile'"> <p style="font-size:larger"><b>{{data.name}}</b></p> <p>Capital: <i>{{data.capital}}</i></p> </div> </dx-tile-view>
import { DxTileViewModule } from "devextreme-angular"; // ... export class AppComponent { tileViewData = [ { name: "Alabama", capital: "Montgomery" }, { name: "Alaska", capital: "Juneau" }, { name: "Arizona", capital: "Phoenix" }, // ... ]; } @NgModule({ imports: [ // ... DxTileViewModule ], // ... })
.tile { border-radius: .5em; text-align: center; color: white; background: gray; }
AngularJS
<div ng-controller="DemoController"> <div dx-tile-view="{ dataSource: tileViewData, itemMargin: 15, baseItemHeight: 80, baseItemWidth: 140, itemTemplate: 'tile' }" dx-item-alias="itemObj"> <div class="tile" data-options="dxTemplate: { name: 'tile' }"> <p style="font-size:larger"><b>{{ itemObj.name }}</b></p> <p>Capital: <i>{{ itemObj.capital }}</i></p> </div> </div> </div>
angular.module('DemoApp', ['dx']) .controller('DemoController', function ($scope) { $scope.tileViewData = [ { name: "Alabama", capital: "Montgomery" }, { name: "Alaska", capital: "Juneau" }, { name: "Arizona", capital: "Phoenix" }, // ... ]; });
.tile { border-radius: .5em; text-align: center; color: white; background: gray; }
dx-item-alias
directive specifies the variable that is used to access the item object.Knockout
<div data-bind="dxTileView: { dataSource: tileViewData, itemMargin: 15, baseItemHeight: 80, baseItemWidth: 140, itemTemplate: 'tile' }"> <div class="tile" data-options="dxTemplate: { name: 'tile' }"> <p style="font-size:larger"><b data-bind="text: name"></b></p> <p>Capital: <i data-bind="text: capital"></i></p> </div> </div>
var viewModel = { tileViewData: [ { name: "Alabama", capital: "Montgomery" }, { name: "Alaska", capital: "Juneau" }, { name: "Arizona", capital: "Phoenix" }, // ... ] }; ko.applyBindings(viewModel);
.tile { border-radius: .5em; text-align: center; color: white; background: gray; }
If you use jQuery alone, combine the HTML markup for items manually with jQuery DOM manipulation methods. To apply this markup, use the itemTemplate callback function.
var tileViewData = [ { name: "Alabama", capital: "Montgomery" }, { name: "Alaska", capital: "Juneau" }, { name: "Arizona", capital: "Phoenix" }, // ... ]; $(function() { $("#tileViewContainer").dxTileView({ dataSource: tileViewData, itemTemplate: function (itemData, itemIndex, itemElement) { itemElement.addClass("tile"); itemElement.append( "<p style='font-size:larger'><b>" + itemData.name + "</b></p>", "<p>Capital: <i>" + itemData.capital + "</i></p>" ) } }); });
.tile { border-radius: .5em; text-align: center; color: white; background: gray; }
You can also customize an individual tile. For this purpose, declare a template for this tile as a script and pass its id
to the template field of the item's data object.
<script id="individualTileTemplate" type="text/html"> <!-- ... --> </script>
var tileViewData = [ { name: "Alabama", capital: "Montgomery" }, { name: "Alaska", capital: "Juneau", template: $("#individualTileTemplate") }, // ... ];
In addition, you can use a 3rd-party template engine to customize widget appearance. For more information, see the 3rd-Party Template Engines article.
View Built-In Template Engine Demo View 3rd-Party Template Engine Demo
See Also
If you have technical questions, please create a support ticket in the DevExpress Support Center.