JavaScript/jQuery TileView - Overview

The TileView UI component 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.

View Demo

The following code adds a primitive TileView to your page.

HTML
JavaScript
  • <div id="tileViewContainer"></div>
  • $(function() {
  • $("#tileViewContainer").dxTileView({
  • dataSource: [
  • { text: "Alabama" },
  • { text: "Alaska" },
  • { text: "Arizona" },
  • // ...
  • ]
  • });
  • });

Note that field names in these data source items are conventional. This provides a default tile appearance, which can be customized later.

By default, the UI component is oriented horizontally, but you can orient it vertically using the direction property.

JavaScript
  • $(function() {
  • $("#tileViewContainer").dxTileView({
  • // ...
  • direction: "vertical"
  • });
  • });

View Demo

See Also