DevExtreme Vue - 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
JavaScript
$(function() {
    $("#tileViewContainer").dxTileView({
        dataSource: [
            { text: "Alabama", disabled: true },
            { text: "Alaska" },
            { text: "Arizona", visible: false }
        ]
    });
});
Angular
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.

Angular
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;
}
AngularJS
HTML
JavaScript
CSS
<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;
}
NOTE
The dx-item-alias directive specifies the variable that is used to access the item object.
Knockout
HTML
JavaScript
CSS
<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.

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