Vue TileView - 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.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.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