Column

The TaskBoardCardModel are added to the respective Column depending on the GroupMemberPath property of the RadTaskBoard control.

The GroupMemberPath property of the RadTaskBoard is required in order for the columns to be created.

The control provides two mechanisms for defining its columns:

Key Features and Properties

  • DisplayIndex: A property of type nullable int? that gets or sets the display index of the column.
  • GroupName: A property of type string that gets or sets the group name used to categorize the items in columns.
  • Header: A property of type string that gets or sets the content inside the header of the columns.
  • HeaderTemplate: A property of type DataTemplate that gets or sets the content template inside the header of the columns. This property can be used to further customize the column header.
  • IsExpanded: A Boolean property that gets or sets if a given column is expanded or not.
  • Width: A property of type double that gets or sets the column width.
  • CollapsedWidth: A property of type double that gets or sets the width of a collapsed column.
  • Items: A collection property that holds the items inside the column.

Automatic Columns Generation

By default, RadTaskBoard will generate its columns automatically based on the underlying data source. When, for example, you set the ItemsSource of RadTaskBoard to a collection of TaskBoardCardModel (see code in Example 1 and the result in Figure 1), the control will create a separate column for each value of the property set to the GroupMemberPath of the RadTaskBoard.

Example 1: Defining the data

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

Example 2: Defining RadTaskBoard in XAML

<telerik:RadTaskBoard x:Name="taskBoard" GroupMemberPath="State" /> 

Figure 1: RadTaskBoard with automatically generated columns

Telerik TaskBoard Column 0

Manual Columns Definition

When the built-in order of the auto generation of columns does not fit in your case or you want to have more columns than the loaded ones, you have few options to change that.

You can manually define all needed columns in the desired order

You can first disable the autogenerating of the columns by setting the AutoGenerateColumns property of the RadTaskBoard to False. Then you can populate the Columns collection property of the control.

If the Header property of the TaskBoardColumn is not set, the GroupName property will be used as a Header.

Example 3: Define RadTaskBoard with custom columns

    <telerik:RadTaskBoard x:Name="taskBoard" GroupMemberPath="State" AutoGenerateColumns="False"> 
        <telerik:RadTaskBoard.Columns> 
            <telerik:TaskBoardColumn GroupName="Not Done"/> 
            <telerik:TaskBoardColumn GroupName="In Progress"/> 
            <telerik:TaskBoardColumn GroupName="Done"/> 
        </telerik:RadTaskBoard.Columns> 
    </telerik:RadTaskBoard> 

Example 4: Define TaskBoardColumns in code

    public MainWindow() 
    { 
        InitializeComponent(); 
        this.taskBoard.Columns.Add(new TaskBoardColumn() { GroupName = "Not Done" }); 
        this.taskBoard.Columns.Add(new TaskBoardColumn() { GroupName = "In Progress" }); 
        this.taskBoard.Columns.Add(new TaskBoardColumn() { GroupName = "Done" }); 
        this.taskBoard.ItemsSource = this.GetTasks();             
    } 

Figure 2: RadTaskBoard with manually generated columns

Telerik TaskBoard Column 1

Change DisplayIndex property of the columns

You can subscribe to the AutoGeneratingColumn event. In the event handler, you can get the currently autogenerated columns and change their DisplayIndex properties to arrange the columns per your needs.

Example 5: Set DisplayIndex of the columns

    private void RadTaskBoard_AutoGeneratingColumn(object sender, TaskBoardAutoGeneratingColumnEventArgs e) 
    { 
        if(e.Column.GroupName == "Not Done") 
        { 
            e.Column.DisplayIndex = 0; 
        } 
        else if(e.Column.GroupName == "In Progress") 
        { 
            e.Column.DisplayIndex = 1; 
        } 
        else if (e.Column.GroupName == "Done") 
        { 
            e.Column.DisplayIndex = 2; 
        } 
    } 

Add additional column while autogenerated columns functionality is enabled

In case you want to have static columns that will be always available, you can manually add them. You can do that in XAML or in code behind by populating the Columns collection.

Example 3: Define RadTaskBoard with custom columns

    <telerik:RadTaskBoard x:Name="taskBoard" GroupMemberPath="State" AutoGenerateColumns="True"> 
        <telerik:RadTaskBoard.Columns> 
            <telerik:TaskBoardColumn GroupName="Ready For Test"/> 
        </telerik:RadTaskBoard.Columns> 
    </telerik:RadTaskBoard> 

The columns added in the Columns collection will be generated first.

See Also

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