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.
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
],
// ...
})Vue
<template>
<DxTileView :data-source="dataSource"/>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxTileView } from 'devextreme-vue/tile-view';
export default {
components: {
DxTileView
},
data() {
return {
dataSource: [
{ text: 'Alabama' },
{ text: 'Alaska' },
{ text: 'Arizona' },
// ...
]
};
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { TileView } from 'devextreme-react/tile-view';
const dataSource = [
{ text: 'Alabama' },
{ text: 'Alaska' },
{ text: 'Arizona' },
// ...
];
class App extends React.Component {
render() {
return (
<TileView dataSource={dataSource}/>
);
}
}
export default App;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.
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
],
// ...
})Vue
<template>
<DxTileView direction="vertical"/>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxTileView } from 'devextreme-vue/tile-view';
export default {
components: {
DxTileView
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import { TileView } from 'devextreme-react/tile-view';
class App extends React.Component {
render() {
return (
<TileView direction="vertical"/>
);
}
}
export default App;See Also
jQuery
Angular
Vue
React
Feedback