React TileView - Customize Tile Appearance
For a minor customization of tiles, you can define specific fields in item data objects. For example, the following code generates three tiles: the first is disabled, the second is not customized, the third is hidden.
JavaScript
- $(function() {
- $("#tileViewContainer").dxTileView({
- dataSource: [
- { text: "Alabama", disabled: true },
- { text: "Alaska" },
- { text: "Arizona", visible: false }
- ]
- });
- });
If you need a more flexible solution, define an itemTemplate.
JavaScript
CSS
- const tileViewData = [
- { name: "Alabama", capital: "Montgomery" },
- { name: "Alaska", capital: "Juneau" },
- { name: "Arizona", capital: "Phoenix" },
- // ...
- ];
- $(function() {
- $("#tileViewContainer").dxTileView({
- dataSource: tileViewData,
- itemTemplate: function (itemData, itemIndex, itemElement) {
- itemElement.addClass("tile");
- itemElement.append(
- "<p style='font-size:larger'><b>" + itemData.name + "</b></p>",
- "<p>Capital: <i>" + itemData.capital + "</i></p>"
- )
- }
- });
- });
- .tile {
- border-radius: .5em;
- text-align: center;
- color: white;
- background: gray;
- }
You can also customize individual tiles. Declare them as scripts and reference them in the template property or assign a customization function straight to this property.
HTML
JavaScript
- <div id="tileViewContainer"></div>
- <script id="individualTileTemplate" type="text/html">
- <span>Comment</span>
- </script>
- $(function() {
- $("#tileViewContainer").dxTileView({
- dataSource: [{
- name: "Alaska",
- capital: "Juneau",
- template: $("#individualTileTemplate")
- }]
- });
- });
Built-In Template Engine Demo 3rd-Party Template Engine Demo
See Also
Feel free to share topic-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.