Displays data as a Kanban-style task board with draggable cards organized into columns.
Bind card data via CardData and column data via ColumnData.
Cards are assigned to columns by matching CardStatusField against ColumnStatusField.
Supports card and column add, edit, delete, and drag-drop reordering through the OnCard* and OnColumn* event callbacks.
Customize the toolbar with TaskBoardToolBar child content, and override card and column appearance
with CardTemplate and ColumnHeaderTemplate.
Children: TaskBoardSettings, TaskBoardToolBar.
Definition
Namespace:Telerik.Blazor.Components
Assembly:Telerik.Blazor.dll
Type Parameters:
TItem
The type of the card data items in CardData.
TColumn
The type of the column data items in ColumnData.
Syntax:
public class TelerikTaskBoard<TItem, TColumn> : BaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable where TColumn : new()Inheritance: objectComponentBaseBaseComponentTelerikTaskBoard<TItem, TColumn>
Implements:
Inherited Members
Constructors
public TelerikTaskBoard()Methods
Scrolls the TaskBoard columns container horizontally so that the column matching
columnDataItem becomes visible.
Has no effect when the TaskBoard has not been rendered yet or the column is not found.
public Task BringColumnIntoView(TColumn columnDataItem)The data item of the column to scroll into view.
Returns:Scrolls the TaskBoard so that the card matching item becomes visible.
The columns container scrolls horizontally to bring the column into view, and the column
card list scrolls vertically to bring the card into view.
Has no effect when the TaskBoard has not been rendered yet or the item is not found.
public Task BringIntoView(TItem item)The data item whose card should be scrolled into view.
Returns:protected override void BuildRenderTree(RenderTreeBuilder __builder)Overrides:
public override void Dispose()Overrides:
Opens the card edit pane for the card matching item.
If the card is not found or the component is disabled, the call has no effect.
Any previously open edit pane is replaced.
public Task EditCardAsync(TItem item)The data item whose card should enter edit mode.
Returns:Activates the inline column rename mode for the column matching columnDataItem.
If the column is not found, is disabled, or the component is disabled, the call has no effect.
public Task EditColumnAsync(TColumn columnDataItem)The data item of the column to edit.
Returns:GetState()
TaskBoardState<TColumn>
Returns a snapshot of the current column display order and card positions. Store the returned TaskBoardState<TColumn> and pass it back to SetStateAsync(TaskBoardState<TColumn>) to restore the column order and card positions (e.g. after page reload or navigation).
protected override void OnInitialized()Overrides:
Applies a previously captured TaskBoardState<TColumn> to the board,
restoring the column display order and card positions (e.g. after page reload or navigation).
Column data properties (title, WIP limit, enabled, width) are not persisted in state
and must be restored through the ColumnData source.
Card data properties (title, description, priority) are not persisted in state
and must be restored through the CardData source.
public Task SetStateAsync(TaskBoardState<TColumn> state)The state object previously returned by GetState().
Returns:Properties
CardBodyTemplate
RenderFragment<TaskBoardCardTemplateContext<TItem, TColumn>>
Replaces the default card body content while preserving the built-in card header and action menu. The template receives a TaskBoardCardTemplateContext<TItem, TColumn> with the typed data item and the TaskBoardColumnState<TColumn> of the column the card belongs to. Ignored when CardTemplate is set, because CardTemplate replaces the entire card. Children: allows arbitrary Blazor content templated on TaskBoardCardTemplateContext<TItem, TColumn>.
[Parameter]
public RenderFragment<TaskBoardCardTemplateContext<TItem, TColumn>> CardBodyTemplate { get; set; }CardData
IEnumerable<TItem>
Binds the collection of card data items to the board. Each item is mapped to a column by matching its CardStatusField value against a column's ColumnStatusField value. Cards are sorted within their column by CardIndexField. Replacing this collection at runtime refreshes all cards on the board.
[Parameter]
public IEnumerable<TItem> CardData { get; set; }The name of the field on the card model rendered as the card body text below the title. Default is "Description".
Also searched by TaskBoardToolBarSearchBoxTool during toolbar search filtering.
[Parameter]
public string CardDescriptionField { get; set; }Enables drag-and-drop for cards between columns and within the same column.
Defaults to true. Set to false to show cards in a fixed order with no drag handles.
Requires OnCardMove to persist position and status changes to your data source.
[Parameter]
public bool CardDraggable { get; set; }The name of the field on the card model that provides the unique card identifier. Default is "Id".
Used as the key during drag-drop, editing, and surfaced as object Item in card event arguments such as OnCardMove and OnCardDelete.
Every card in CardData must have a distinct value for this field.
[Parameter]
public string CardIdField { get; set; }The name of the field on the card model used to sort cards within each column (ascending). Default is "Index".
Update this field in OnCardMove to persist the new card position after a drag-drop reorder.
[Parameter]
public string CardIndexField { get; set; }The name of the field on the card model whose value is matched against Value to render a colored priority indicator on matching cards.
When null (default), priority indicators are not rendered on any card. Requires Priorities to be populated with at least one entry.
[Parameter]
public string CardPriorityField { get; set; }The name of the field on the card model that determines which column the card appears in. Default is "Status".
The value is matched against each column's ColumnStatusField value.
Cards whose status does not match any column are not rendered on the board.
Update this field in OnCardMove to persist a card's new column after a drag-drop.
[Parameter]
public string CardStatusField { get; set; }CardTemplate
RenderFragment<TaskBoardCardTemplateContext<TItem, TColumn>>
Overrides the default card rendering for all cards on the board. The template receives a TaskBoardCardTemplateContext<TItem, TColumn> with the typed data item and the TaskBoardColumnState<TColumn> of the column the card belongs to. Children: allows arbitrary Blazor content templated on TaskBoardCardTemplateContext<TItem, TColumn>.
[Parameter]
public RenderFragment<TaskBoardCardTemplateContext<TItem, TColumn>> CardTemplate { get; set; }The name of the field on the card model rendered as the card heading text. Default is "Title".
Also searched by TaskBoardToolBarSearchBoxTool when the user types in the toolbar search box.
[Parameter]
public string CardTitleField { get; set; }Field on the column model used to override the action buttons for that specific column.
Must resolve to a nullable TaskBoardColumnButtons value.
When null (default), no per-column button override is read and all columns use Buttons.
[Parameter]
public string ColumnButtonsField { get; set; }ColumnData
IEnumerable<TColumn>
Binds the collection of column data items that define the board's columns. Each item maps to one rendered column. Columns are sorted left-to-right by ColumnIndexField on initial render. Cards are assigned to columns by matching CardStatusField against each column's ColumnStatusField value. Adding or removing items at runtime adds or removes columns.
[Parameter]
public IEnumerable<TColumn> ColumnData { get; set; }The name of the field on the column model that controls whether the column is interactive. Default is "Enabled".
Must resolve to a bool value. When false, that column does not accept card drops, adds, edits, or deletes.
Use this for a per-column read-only state. To disable the entire board, use Enabled instead.
Set this parameter to null to skip reading the field and treat all columns as always enabled.
[Parameter]
public string ColumnEnabledField { get; set; }Replaces the default column header rendering for all columns. The template receives a TaskBoardColumnHeaderTemplateContext<TColumn> with the raw column data item and the runtime TaskBoardColumnState<TColumn>. Useful for adding card counts, icons, or custom action buttons. Children: allows arbitrary Blazor content templated on TaskBoardColumnHeaderTemplateContext<TColumn>.
[Parameter]
public RenderFragment<TaskBoardColumnHeaderTemplateContext<TColumn>> ColumnHeaderTemplate { get; set; }The name of the field on the column model used to sort columns left-to-right on initial render (ascending). Default is "Index".
After a column drag-drop, update this field in OnColumnReorder to persist the new arrangement.
Requires ColumnReorderable to be true to allow user reordering.
[Parameter]
public string ColumnIndexField { get; set; }Enables drag-and-drop reordering of columns by their header.
Defaults to false. When enabled, requires OnColumnReorder to persist the new column order to your data source.
[Parameter]
public bool ColumnReorderable { get; set; }The name of the field on the column model that serves as the unique column key. Default is "Status".
Each column's value is matched against CardStatusField on every card in CardData to assign cards to the correct column.
Every column in ColumnData must have a distinct value for this field.
[Parameter]
public string ColumnStatusField { get; set; }The name of the field on the column model rendered as the column header title. Default is "Title".
Override the header appearance entirely using ColumnHeaderTemplate.
[Parameter]
public string ColumnTitleField { get; set; }The name of the field on the column model used as a per-column CSS width override (e.g. "320px", "20%"). Default is "Width".
A non-null, non-empty field value overrides the board-level default set in Width.
Set this parameter to null to disable per-column width reading; all columns then use Width.
[Parameter]
public string ColumnWidthField { get; set; }The name of the field on the column model that sets the Work In Progress (WIP) limit the maximum number of cards allowed in the column. Default is "WipLimit".
A value of null means no limit. When the limit is reached, the board prevents additional cards from being moved into or added to the column.
Set this parameter to null to disable WIP limit reading entirely (all columns become unlimited).
[Parameter]
public string ColumnWipLimitField { get; set; }Shows a confirmation dialog before a card or column is permanently deleted.
Defaults to true. Set to false to delete immediately on button click without prompting the user.
Applies to both card deletion (OnCardDelete) and column deletion (OnColumnDelete).
[Parameter]
public bool ConfirmDelete { get; set; }[CascadingParameter]
public DialogFactory DialogFactory { get; set; }Replaces the default content area inside the card edit pane.
The template receives a TaskBoardEditPaneTemplateContext<TItem> with a cloned card item
and SaveAsync/CancelAsync methods to control the pane.
When set, the built-in Save and Cancel buttons are hidden — use the context methods instead.
[Parameter]
public RenderFragment<TaskBoardEditPaneTemplateContext<TItem>> EditPaneTemplate { get; set; }When false, puts the entire board into read-only mode - cards and columns cannot be edited, added, deleted, or dragged.
Defaults to true. To disable individual columns only, control the ColumnEnabledField value per column instead.
[Parameter]
public bool Enabled { get; set; }Sets the CSS height of the TaskBoard container. Example: "700px", "100%".
When content overflows the height, a vertical scroll bar appears on the column list.
[Parameter]
public string Height { get; set; }Fires when the user clicks on a card body. Use to identify the clicked card and navigate to a detail view or open a custom dialog. Does not fire when clicking card action buttons (edit / delete).
[Parameter]
public EventCallback<TaskBoardCardClickEventArgs<TItem>> OnCardClick { get; set; }Fires before a new card is committed. Use to add the new card to your data source.
The target column's status is provided via Status.
Set IsCancelled to true to abort the create without saving.
[Parameter]
public EventCallback<TaskBoardCardCreateEventArgs<TItem>> OnCardCreate { get; set; }Fires before a card is removed from the board.
Use to remove the matching entry from your data source.
Set IsCancelled to true to prevent deletion.
When ConfirmDelete is true, this event fires after the user confirms the dialog.
[Parameter]
public EventCallback<TaskBoardCardDeleteEventArgs<TItem>> OnCardDelete { get; set; }Fires when the user drags a card to a different column or reorders it within the same column.
Use NewStatus and NewIndex to persist the card's new position to your data source.
Set IsCancelled to true to snap the card back to its original position.
Requires CardDraggable to be true.
[Parameter]
public EventCallback<TaskBoardCardMoveEventArgs<TItem>> OnCardMove { get; set; }Fires after the user saves edits to a card in the edit pane.
Use to update your data source and OriginalItem to compare or roll back changes.
Set IsCancelled to true to discard the user's edits.
[Parameter]
public EventCallback<TaskBoardCardUpdateEventArgs<TItem>> OnCardUpdate { get; set; }Fires before a new column is committed. Use to add the new column to your data source.
Set IsCancelled to true to abort the create without saving.
[Parameter]
public EventCallback<TaskBoardColumnCreateEventArgs<TColumn>> OnColumnCreate { get; set; }Fires before a column and all its cards are removed from the board.
Use to remove the matching entry from your data source.
Set IsCancelled to true to prevent deletion.
When ConfirmDelete is true, this event fires after the user confirms the dialog.
[Parameter]
public EventCallback<TaskBoardColumnDeleteEventArgs<TColumn>> OnColumnDelete { get; set; }Fires when the user drags a column to a new position. Requires ColumnReorderable to be true.
Use NewIndex to persist the column's new index to your data source via ColumnIndexField.
Set IsCancelled to true to prevent the reorder and snap the column back.
[Parameter]
public EventCallback<TaskBoardColumnReorderEventArgs<TColumn>> OnColumnReorder { get; set; }Fires after the user saves edits to a column (title, WIP limit).
Use to update your data source and OriginalItem to compare or roll back changes.
Set IsCancelled to true to discard the user's edits.
[Parameter]
public EventCallback<TaskBoardColumnUpdateEventArgs<TColumn>> OnColumnUpdate { get; set; }The list of priority definitions for the TaskBoard.
Each TaskBoardCardPriority maps a priority key to a color and display label.
The priority key is matched against each card's CardPriorityField value
to render a colored indicator on the card and populate the priority dropdown in the edit dialog.
When null or empty, priority indicators are not rendered.
[Parameter]
public List<TaskBoardCardPriority> Priorities { get; set; }SelectedCard
TItem
Gets or sets the currently selected card data item.
Supports two-way binding via @bind-SelectedCard.
Set to default to clear the selection programmatically.
Pair with SelectedCardChanged to receive updates when the user clicks a card.
[Parameter]
public TItem SelectedCard { get; set; }Fires when the user clicks a card, emitting the selected card data item for two-way binding.
Use @bind-SelectedCard or handle this event explicitly to respond to card selection changes.
[Parameter]
public EventCallback<TItem> SelectedCardChanged { get; set; }Groups default card and column configuration inside the board markup. Children: TaskBoardCardSettings, TaskBoardColumnSettings.
[Parameter]
public RenderFragment TaskBoardSettings { get; set; }Contains the toolbar tool components for the TaskBoard. Children: TaskBoardToolBarAddColumnTool, TaskBoardToolBarSearchBoxTool, TaskBoardToolBarCustomTool, TaskBoardToolBarSpacerTool.
[Parameter]
public RenderFragment TaskBoardToolBar { get; set; }