DevExtreme jQuery - 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