DevExtreme Angular - 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.

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