DevExtreme jQuery/JS - 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.
- $(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 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.
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.