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