All docs
V23.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

jQuery TileView - Customize Tile Appearance

For a minor customization of tiles, you can define specific fields in item data objects. 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>
Vue
<template>
    <DxTileView :data-source="dataSource"/>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import { DxTileView } from 'devextreme-vue/tile-view';

export default {
    components: {
        DxTileView
    },
    data() {
        return {
            dataSource: [
                { text: 'Alabama', disabled: true },
                { text: 'Alaska' },
                { text: 'Arizona', visible: false }
            ]
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { TileView } from 'devextreme-react/tile-view';

const dataSource = [
    { text: 'Alabama', disabled: true },
    { text: 'Alaska' },
    { text: 'Arizona', visible: false }
];

class App extends React.Component {
    render() {
        return (
            <TileView dataSource={dataSource}/>
        );
    }
}

export default App;

If you need a more flexible solution, define an itemTemplate.

jQuery
JavaScript
CSS
const 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;
}
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;
}
Vue
App.vue
<template>
    <DxTileView
        :data-source="tileViewData"
        :item-margin="15"
        :base-item-height="80"
        :base-item-width="140"
        item-template="tile">
        <template #tile="{ data }">
            <div>
                <p style="font-size:larger"><b>{{data.name}}</b></p>
                <p>Capital: <i>{{data.capital}}</i></p>
            </div>
        </template>
    </DxTileView>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTileView from "devextreme-vue/tile-view";

export default {
    components: {
        DxTileView
    },
    data() {
        return {
            tileViewData: [
                { name: "Alabama", capital: "Montgomery" },
                { name: "Alaska", capital: "Juneau" },
                { name: "Arizona", capital: "Phoenix" },
                // ...
            ]
        };
    }
};
</script>

<style>
.tile {
    border-radius: .5em;
    text-align: center;
    color: white;
    background: gray;
}
</style>
React
App.js
styles.css
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { TileView } from 'devextreme-react/tile-view';

const tileViewData = [
    { name: "Alabama", capital: "Montgomery" },
    { name: "Alaska", capital: "Juneau" },
    { name: "Arizona", capital: "Phoenix" },
    // ...
];

const renderTileItem = (itemData) => {
    return (
        <div>
            <p style={{fontSize: "larger"}}>{itemData.name}</p>
            <p><i>{itemData.capital}</i></p>
        </div>
    );
}

class App extends React.Component {
    render() {
        return (
            <TileView
                items={tileViewData}
                itemRender={renderTileItem}
            />
        );
    }
}
export default App;
.tile {
    border-radius: .5em;
    text-align: center;
    color: white;
    background: gray;
}
jQuery

You can also customize individual tiles. Declare them as scripts and reference them in the template property or assign a customization function straight to this property.

HTML
JavaScript
<div id="tileViewContainer"></div>
<script id="individualTileTemplate" type="text/html">
    <span>Comment</span>
</script>
$(function() {
    $("#tileViewContainer").dxTileView({
        dataSource: [{
            name: "Alaska", 
            capital: "Juneau",
            template: $("#individualTileTemplate")
        }]
    });
});
Angular

You can also customize individual tiles. Declare them using the dxItem component.

HTML
TypeScript
<dx-tile-view>
    <dxi-item>
        <span>User</span>
    </dxi-item>
    <dxi-item>
        <span>Comment</span>
    </dxi-item>
</dx-tile-view>
import { DxTileViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxTileViewModule
    ],
    // ...
})
Vue

You can also customize individual tiles. Declare them using the dxItem component.

<template>
    <DxTileView>
        <DxItem>
            <template #default>
                <span>User</span>
            </template>
        </DxItem>
        <DxItem>
            <template #default>
                <span>Comment</span>
            </template>
        </DxItem>
    </DxTileView>
</template>

<script>
import 'devextreme/dist/css/dx.light.css';

import DxTileView, { DxItem } from "devextreme-vue/tile-view";

export default {
    components: {
        DxTileView,
        DxItem
    }
};
</script>
React

You can also customize individual tiles. Declare them using the dxItem component.

import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { TileView, Item } from 'devextreme-react/tile-view';

class App extends React.Component {
    render() {
        return (
            <TileView>
                <Item>
                    <span>User</span>
                </Item>
                <Item>
                    <span>Comment</span>
                </Item>
            </TileView>
        );
    }
}

export default App;

Built-In Template Engine Demo 3rd-Party Template Engine Demo

See Also