DevExtreme Angular - 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.

TypeScript
HTML
  • 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.

HTML
TypeScript
CSS
  • <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;
  • }

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.

JavaScript
CSS
  • 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.

HTML
JavaScript
  • <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