DevExtreme jQuery - Overview
The TileView widget contains a collection of tiles. Tiles can store much more information than ordinary buttons, that is why they are very popular in apps designed for touch devices.
The following code adds a primitive TileView to your page.
jQuery
HTML
JavaScript
<div id="tileViewContainer"></div>
$(function() {
$("#tileViewContainer").dxTileView({
dataSource: [
{ text: "Alabama" },
{ text: "Alaska" },
{ text: "Arizona" },
// ...
]
});
});Angular
HTML
TypeScript
<dx-tile-view
[dataSource]="tileViewData">
</dx-tile-view>
import { DxTileViewModule } from "devextreme-angular";
// ...
export class AppComponent {
tileViewData = [
{ text: "Alabama" },
{ text: "Alaska" },
{ text: "Arizona" },
// ...
];
}
@NgModule({
imports: [
// ...
DxTileViewModule
],
// ...
})Note that all data source items in the code above follow the Default Item Template pattern. This provides a default tile appearance, which can be customized later.
By default, the widget is oriented horizontally, but you can orient it vertically using the direction option.
jQuery
JavaScript
$(function() {
$("#tileViewContainer").dxTileView({
// ...
direction: "vertical"
});
});Angular
HTML
TypeScript
<dx-tile-view ...
direction="vertical">
</dx-tile-view>
import { DxTileViewModule } from "devextreme-angular";
// ...
export class AppComponent {
// ...
}
@NgModule({
imports: [
// ...
DxTileViewModule
],
// ...
})See Also
- Configure a Widget: Angular | Vue | React | jQuery | AngularJS | Knockout | ASP.NET MVC 5 | ASP.NET Core
- TileView - Specify the Size of Tiles
- TileView - Customize Tile Appearance
- TileView API Reference
Feedback