DevExtreme React - Specify the Size of Tiles

The size of all tiles in the widget is determined by the baseItemHeight and baseItemWidth options. If you need to set the size of a specific tile, use the heightRatio and widthRatio options 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
var tileViewData = [
    { text: "Maine", capital: "Augusta" },
    { text: "Maryland", capital: "Annapolis" },
    { text: "Massachusetts", capital: "Boston", height: 2, widthRatio: 2 }
    // ...
];

$(function() {
    $("#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
    ],
    // ...
})
See Also