Category Indicator

There are different ways to organize your RadTaskBoard cards. The control provides category indicator color functionality, which allows you to apply different colors to its tasks. Using colors is a quick way to make tasks stand out on the board.

The purpose of this tutorial is to show you how to set different colors to your RadTaskBoard tasks.

First, we can go ahead and create some sample data and apply it directly to the ItemSource of the RadTaskBoard. The RadTaskBoard control will be populated with a collection of TaskBoardCardModel. The category indicator functionality uses the CategoryName property of the TaskBoardCardModel to match the item with the color.

Example 1: Defining ViewModel

public MainWindow() 
{ 
    InitializeComponent();   
    taskBoard.ItemsSource = GetTasks(); 
} 
 
public ObservableCollection<TaskBoardCardModel> GetTasks() 
{ 
    ObservableCollection<TaskBoardCardModel> tasks = new ObservableCollection<TaskBoardCardModel> 
    { 
        new TaskBoardCardModel() 
        { 
            Assignee = "Bella", 
            Title = "RadDocking: Create Unit Test ", 
            Description = "Add Unit Tests", 
            State = "Done", 
            CategoryName = "Low" 
        }, 
 
        new TaskBoardCardModel() 
        { 
            Assignee = "Tomas", 
            Title = "RadPanelBar: IsExpanded property is not respected", 
            Description = "Fix Bug", 
            State = "Not Done", 
            CategoryName = "Medium" 
        }, 
 
        new TaskBoardCardModel() 
        { 
            Assignee = "Smith", 
            Title = "RadChartView: Implement Animation Feature", 
            Description = "Implement animations for all series in RadChartView", 
            State = "In Progress", 
            CategoryName = "High", 
        } 
    }; 
 
    return tasks; 
} 
The next step is to declare our colors. The Categories collection property of the RadTaskBoard needs to be set. We can create a CategoryCollection with CategoryModel objects inside. The CategoryModel exposes CategoryName and CategoryBrush properties. The value of the CategoryName will be used to match the value of the CategoryName of the TaskBoardCardModel. And the color set to the CategoryBrush will be applied to the task.

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: Specifying custom colors

   <telerik:RadTaskBoard x:Name="taskBoard" 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> 
If you run the application now, you should get a structure like in Figure 1:

Figure 1: Tasks with different categories Color

Telerik TaskBoard Category Indicator 0

Hide Categories Color

When you don't want a given task to have a color, you can set the ShowCategoryIndicator property of the TaskBoardCardModel to false. We are going to set this property to false to the second TaskBoardCardModel element from Example 1.

Example 3: Hide Category Indicator on the second item

public MainWindow() 
{ 
    InitializeComponent();   
    taskBoard.ItemsSource = GetTasks(); 
} 
 
public ObservableCollection<TaskBoardCardModel> GetTasks() 
{ 
    ObservableCollection<TaskBoardCardModel> tasks = new ObservableCollection<TaskBoardCardModel> 
    { 
        new TaskBoardCardModel() 
        { 
            Assignee = "Bella", 
            Title = "RadDocking: Create Unit Test ", 
            Description = "Add Unit Tests", 
            State = "Done", 
            CategoryName = "Low" 
        }, 
 
        new TaskBoardCardModel() 
        { 
            Assignee = "Tomas", 
            Title = "RadPanelBar: IsExpanded property is not respected", 
            Description = "Fix Bug", 
            State = "Not Done", 
            CategoryName = "Medium", 
            ShowCategoryIndicator = false 
        }, 
 
        new TaskBoardCardModel() 
        { 
            Assignee = "Smith", 
            Title = "RadChartView: Implement Animation Feature", 
            Description = "Implement animations for all series in RadChartView", 
            State = "In Progress", 
            CategoryName = "High", 
        } 
    }; 
 
    return tasks; 
} 
Figure 2 demonstrates this change.

Figure 2: A task with no color

Telerik TaskBoard categories Color 1

See Also

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