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.

JavaScript
  • $(function() {
  • $("#tileViewContainer").dxTileView({
  • dataSource: [
  • { text: "Alabama", disabled: true },
  • { text: "Alaska" },
  • { text: "Arizona", visible: false }
  • ]
  • });
  • });

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

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