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

Kanban Board

This document shows how you can create a Kanban board with a Tile View. A set of properties and events provided by this View help you enable the Kanban layout mode and implement edit operations common to Kanban boards.

Expanded What is a Kanban Board

Kanban (‘signboard’ in Japanese) is a method of managing business processes, and the Kanban board is a tool for providing a visual flow of work.

A typical Kanban board consists of cards (tiles) combined into groups (columns or rows). Groups identify workflow stages (statuses), and cards represent workflow items. A user can move cards within and between groups using drag-and-drop, thus changing the status and order of cards. Additionally, the Kanban board may provide the card editing feature.

The following sections describe the basic steps needed to implement a Kanban board using the Data Grid's Tile View. A complete example can be found in the Tile View Kanban Board demo module, which is included in the Data Grid and Editors demo.

Note

In this topic, the term "tile" will be used to refer to Kanban board items.

Expanded Prepare Data

First, create a data source that contains data for your Kanban board. Each record from this data source will be rendered as a tile in the Tile View. The data source must contain a dedicated field that specifies the status for each tile. According to these statuses, all tiles will be visually combined in groups.

Once you have prepared a data source, bind it to the Data Grid using the GridControl.DataSource and (optionally) GridControl.DataMember properties.

Expanded Create a Tile View and Enable Tile Grouping and Kanban Layout Mode

  1. Create a Tile View. At design time, you can create a Tile View from the Level Designer.

    Tip

    To learn about basic design-time customization operations, refer to Data Grid and Views and Level Designer.

  2. Ensure that the Tile View's column collection (ColumnView.Columns) is populated with columns bound to fields in the underlying data source. If you assign a data source to the grid at design time, you can populate the column collection (or ensure that it is populated with columns) using the Columns page of the grid control's main Designer. In code, you can call the Tile View's BaseView.PopulateColumns method.

    Note

    Beside columns that provide data for tiles, the column collection must contain a column that identifies the tile status (this column must be bound to the data source status field).

  3. Enable the tile grouping feature by assigning the status column to the TileViewColumns.GroupColumn property (TileView.ColumnSet.GroupColumn). This organizes all tiles within groups (columns or rows depending on the TileViewItemOptions.Orientation setting) according to their statuses. The order of tiles within each group will match the order of underlying data records in the data source.

  4. Set the TileView.OptionsTiles.LayoutMode (TileViewItemOptions.LayoutMode) property to Kanban. In this layout mode, each group displays tiles either vertically (when TileViewItemOptions.Orientation is Horizontal) or horizontally (when TileViewItemOptions.Orientation is Vertical). The contents of each group can be scrolled independently of other groups.

  5. Set the TileView.OptionsTiles.VerticalContentAlignment (TileViewItemOptions.VerticalContentAlignment) property to Top. This aligns tiles to the top of the View.

    If you enabled the vertical orientation for the TileView with the TileViewItemOptions.Orientation property, set the TileView.OptionsTiles.HorizontalContentAlignment (TileViewItemOptions.HorizontalContentAlignment) property to Near.

Expanded Specify the Tile Template

The layout of elements (fields) within all tiles is specified by a tile template. You can build this template using the Tile Template page in the grid control's main Designer, and in code using the TileView.TileTemplate property.

See the Tile View topic to learn more about creating tile templates.

Expanded Enable Tile Drag-and-drop

By default, the built-in tile drag-and-drop feature is disabled. You can allow users to drag tiles within and between columns with the TileViewOptionsDragDrop.AllowDrag (TileView.OptionsDragDrop.AllowDrag) property.

Drag-and-drop operations in data-aware controls, including the Data Grid's Tile View, must be performed on the data source level. Whenever a tile is moved to a new position using drag-and-drop, the Tile View moves an underlying record to a corresponding position in the data source. In addition, if a tile is moved to a different group (column), the record's group field value (TileView.ColumnSet.GroupColumn.FieldName) is changed accordingly.

When using the built-in drag-and-drop feature, you the capability to customize and cancel drag-and-drop operations, with the following events.

In advanced cases, you may need to disable the built-in drag-and-drop feature and implement this functionality yourself.

Expanded Enable Tile Editing Feature

See Tile Editing to learn how to enable the data editing feature.

Expanded Additional Customizations

This section covers additional tile customization tasks you may need to perform.

Dynamic Tile Customization

Use the TileView.ItemCustomize event to dynamically modify tile elements according to your logic. This event fires for each tile when it is about to be displayed.

Context Buttons

You can add additional actions (e.g., buttons) to tiles by adding context buttons to the TileView.ContextButtons collection.

Expanded See Also

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