New to Telerik UI for WPF? Download free 30-day trial

Binding to TaskBoardCardModel

The RadTaskBoard control provides a TaskBoardCardModel ViewModel class designed to serve as a base ViewModel for a RadTaskBoardCard element. This class is designed to expose the most required properties that allow you to track your task life cycle.

Key Properties

  • Title: A property of type string that gets or sets the title of the task.
  • Assignee: A property of type object that gets or sets to whom this task is assigned.
  • Id: A property of type string that gets or sets the id of the task.
  • Description: A property of type string that gets or sets the description of the task.
  • State: A property of type string that gets or sets the current state of the task. The purpose of this property is to be set to the GroupMemberPath of the RadTaskBoard.
  • CategoryName: A property of type string that gets or sets the category name of the task which will be used for the indicator-color feature of the RadTaskBoard.
  • ShowCategoryIndicator: A boolean property that gets or sets if the indicator-color of a given task is visible or not.
  • IconPath: A property of type string that gets or sets the icon path of the task.
  • Tags: A collection property of objects that gets the tags added to the task. To populate the collection, you can use its Add() method.

The following tutorial will guide you how to bind a RadTaskBoard to a collection of TaskBoardCardModel.

First, we will create our data, which is going to be used to populate the RadTaskBoard control.

Example 1: Creating ViewModel

public class MainViewModel: ViewModelBase 
{ 
    public ObservableCollection<TaskBoardCardModel> Data { get; set; } 
 
    public MainViewModel() 
    { 
        Data = GetTasks(); 
    }        
 
    public ObservableCollection<TaskBoardCardModel> GetTasks() 
    { 
        ObservableCollection<TaskBoardCardModel> tasks = new ObservableCollection<TaskBoardCardModel>(); 
        TaskBoardCardModel task = new TaskBoardCardModel() 
        { 
            Assignee = "Bella", 
            Title = "RadDocking: Unit Test", 
            Description = "Add Unit Tests", 
            State = "Not Done", 
            CategoryName = "Low", 
            IconPath= @"/Project_NameSpace;component/Images/Bella.jpg" 
 
        }; 
        task.Tags.Add("Important"); 
        task.Tags.Add(2); 
        task.Tags.Add(DateTime.Now); 
        tasks.Add(task); 
 
        task = new TaskBoardCardModel() 
        { 
            Assignee = "Tomas", 
            Title = "RadPanelBar: IsExpanded property is not respected", 
            Description = "Fix Bug", 
            State = "In Progress", 
            CategoryName = "Medium", 
            IconPath= @"/Project_NameSpace;component/Images/Tomas.jpg" 
        }; 
        task.Tags.Add("R1"); 
        tasks.Add(task); 
 
        task = new TaskBoardCardModel() 
        { 
            Assignee = "Peter", 
            Title = "RadChartView: Implement Animation Feature", 
            Description = "Implement animmations for all series in RadChartView.", 
            State = "Done", 
            CategoryName = "High" 
            IconPath= @"/Project_NameSpace;component/Images/Peter.jpg" 
        }; 
        task.Tags.Add("Complex"); 
        tasks.Add(task);         
 
        return tasks; 
    }         
} 
Next, we can go ahead and define the RadTaskBoard in our view:

The CategoryCollection and CategoryModel class can be accessed in XAML through the following namespace:
xmlns:taskBoard="clr-namespace:Telerik.Windows.Controls.TaskBoard;assembly=Telerik.Windows.Controls"

Example 2: Defining RadTaskBoard in XAML

<telerik:RadTaskBoard x:Name="taskBoard" ItemsSource="{Binding Data}" GroupMemberPath="State"  > 
    <telerik:RadTaskBoard.Categories> 
        <taskBoard:CategoryCollection> 
            <taskBoard:CategoryModel CategoryName="Low" CategoryBrush="Green"/> 
            <taskBoard:CategoryModel CategoryName="Medium" CategoryBrush="Yellow"/> 
            <taskBoard:CategoryModel CategoryName="High" CategoryBrush="Red"/> 
        </taskBoard:CategoryCollection> 
    </telerik:RadTaskBoard.Categories>       
</telerik:RadTaskBoard> 
And finally, we need to set the DataContext of the MainWindow:

Example 3: Setting DataContext

public MainWindow()  
{  
    InitializeComponent();  
    this.DataContext = new MainViewModel();  
} 

See Also

In this article
Not finding the help you need? Improve this article