All docs
V20.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. This link will take you to the root page.
19.1
The page you are viewing does not exist in version 19.1. This link will take you to the root page.
18.2
The page you are viewing does not exist in version 18.2. This link will take you to the root page.
18.1
The page you are viewing does not exist in version 18.1. This link will take you to the root page.
17.2
The page you are viewing does not exist in version 17.2. This link will take you to the root page.
A newer version of this page is available. Switch to the current version.

Specify the Size of Tiles

The size of all tiles in the UI component is determined by the baseItemHeight and baseItemWidth properties. If you need to set the size of a specific tile, use the heightRatio and widthRatio properties of this tile. In this case, the size will be calculated according to the following formulas.

height = baseItemHeight * heightRatio
width = baseItemWidth * widthRatio

For example, the following code makes the "Massachusetts" tile twice bigger than the other tiles.

jQuery
JavaScript
$(function() {
    const tileViewData = [
        { text: "Maine", capital: "Augusta" },
        { text: "Maryland", capital: "Annapolis" },
        { text: "Massachusetts", capital: "Boston", height: 2, widthRatio: 2 }
        // ...
    ];

    $("#tileViewContainer").dxTileView({
        dataSource: tileViewData,
        baseItemHeight: 130,
        baseItemWidth: 180
    });
});
Angular
HTML
TypeScript
<dx-tile-view 
    [dataSource]="tileViewData"
    [baseItemHeight]="130"
    [baseItemWidth]="180">
</dx-tile-view>
import { DxTileViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    tileViewData = [
        { text: "Maine", capital: "Augusta" },
        { text: "Maryland", capital: "Annapolis" },
        { text: "Massachusetts", capital: "Boston", height: 2, widthRatio: 2 }
        // ...
    ];
}
@NgModule({
    imports: [
        // ...
        DxTileViewModule
    ],
    // ...
})
Vue
<template>
    <DxTileView
        :data-source="tileViewData"
        :base-item-height="130"
        :base-item-width="180"
    />
</template>

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

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

export default {
    components: {
        DxTileView
    },
    data() {
        return {
            tileViewData: [
                { text: 'Maine', capital: 'Augusta' },
                { text: 'Maryland', capital: 'Annapolis' },
                { text: 'Massachusetts', capital: 'Boston', height: 2, widthRatio: 2 }
                // ...
            ]
        };
    }
}
</script>
React
import React from 'react';
import 'devextreme/dist/css/dx.common.css';
import 'devextreme/dist/css/dx.light.css';

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

const tileViewData = [
    { text: 'Maine', capital: 'Augusta' },
    { text: 'Maryland', capital: 'Annapolis' },
    { text: 'Massachusetts', capital: 'Boston', height: 2, widthRatio: 2 }
    // ...
];

class App extends React.Component {
    render() {
        return (
            <TileView
                dataSource={tileViewData}
                baseItemHeight={130}
                baseItemWidth={180}
            />
        );
    }
}

export default App;
See Also