Log In
Home
Support
Demos
Documentation
Blogs
Training
Webinars
[Expand]General Information
[Collapse]WinForms Controls
  Prerequisites
 [Expand]What's Installed
 [Expand]Build an Application
 [Collapse]Controls and Libraries
  [Expand]Forms and User Controls
  [Expand]Messages, Notifications and Dialogs
  [Expand]Editors and Simple Controls
  [Expand]Ribbon, Bars and Menu
  [Expand]Application UI Manager
  [Expand]Docking Library
  [Collapse]Data Grid
   [Expand]Getting Started
   [Expand]Binding to Data
   [Expand]Grid View
   [Collapse]View Technology
    [Expand]Banded Grid Views
    [Expand]Card View
    [Expand]Layout View
    [Collapse]Tile View
      Tile View
      Kanban Board
      Tile Editing
      Tutorial: Tile View - Basics
      Tutorial: Tile View - Element Layout and Appearance
      Tutorial: Tile View - Service Columns and Dynamic Tile Customization
    [Expand]WinExplorer View
     View Hierarchy
   [Expand]Grouping
   [Expand]Sorting
   [Expand]Summaries
   [Expand]Data Editing
   [Expand]Filtering and Locating Rows
   [Expand]Focus and Selection Handling
   [Expand]Processing Rows
   [Expand]Formatting Cell Values
   [Expand]Master-Detail Relationships
   [Expand]Asynchronous Image Load
   [Expand]Export and Printing
   [Expand]Appearance and Conditional Formatting
   [Expand]Batch Modifications
   [Expand]Hit Information
   [Expand]Hints
   [Expand]Popup Menus
   [Expand]Saving and Restoring Layouts
   [Expand]Visual Elements
   [Expand]Design-Time Features
   [Expand]Examples
   [Expand]End-User Capabilities
    Included Components
  [Expand]Vertical Grid
  [Expand]Pivot Grid
  [Expand]Tree List
  [Expand]Chart Control
  [Expand]Diagrams
  [Expand]Gauges
  [Expand]Map Control
  [Expand]Scheduler
  [Expand]Spreadsheet
  [Expand]Rich Text Editor
  [Expand]Spell Checker
  [Expand]Form Layout Managers
  [Expand]Navigation Controls
  [Expand]Printing-Exporting
  [Expand]PDF Viewer
   Reporting
  [Expand]Snap
  [Expand]TreeMap Control
 [Expand]Common Features
  Get More Help
 [Expand]API Reference
[Expand]ASP.NET Controls and MVC Extensions
[Expand]ASP.NET Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Document Server
[Expand]Reporting
[Expand]Report Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]CodeRush
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation

Tutorial: Tile View - Service Columns and Dynamic Tile Customization

This walkthrough is a transcript of the Tile View - Service Columns and Dynamic Tile Customization video available on the DevExpress YouTube Channel.

In this tutorial, you will learn how to apply data grouping to the Tile View, how to control the enabled state or check status of tiles depending on a field value and how to customize tile items using a specially designed event.

Expanded Applying Data Grouping

Expand the TileView.ColumnSet property to explore the list of service columns the Tile View can use. These columns affect the View without displaying their data in the corresponding tile items. They set background images, the tile checked state, enabled state and, finally, group the View against the specified data field. Start with grouping the View against the Country column.

Once you have set the column, expand the TileView.Appearance property and change the GroupText style.

Run the application to see that all tiles are now divided into two groups – UK and USA.

Return to design time and select the Country column in the Property Grid. Set the OptionsColumn.ShowCaption option to true and run the application again. Group captions will now contain field name prefixes.

Expanded Changing the Enabled State for Specific Tiles

Expand the TileView.ColumnSet property again and now set the EnabledColumn property. The bound data field values will specify the enabled state for individual tiles.

Run the application to see how disabled tiles look and make sure that they don’t respond to user actions in the same way enabled tiles do.

Expanded Dynamic Tile Customization

Now see how you can enable conditional formatting in the Tile View. You will hide a tile item in certain tiles depending on their data.

Add a new static text element and set its caption to On Vacation. Align the item to the bottom of the Tile template and set the TileItemElement.StretchHorizontal propery to true and TileItemElement.Height to 20. Change the element’s background and foreground colors to add contrast.

You need to display this newly added element only for disabled tiles. To do so, handle the View’s TileView.ItemCustomize event. If the Available value in the current row is true, hide the element from the tile by setting text to an empty string and background color to transparent.

Run the application to see the result. The label is only displayed in disabled items as planned.

Expanded See Also

How would you rate this topic?​​​​​​​