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 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