Help us shape the 2021 DevExtreme Roadmap. Take our 5 minute survey.
Dismiss

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