New to KendoReact? Start a free 30-day trial

TaskBoardProps

Interface

Represents the props of the TaskBoard component

Definition

Package:@progress/kendo-react-taskboard

Properties

card?

ComponentType<TaskBoardCardProps>

Represents the TaskBoardCard component. Example:

jsx

<TaskBoard card={(props) => <div>{props.title}</div>} />

children?

ReactNode

The React elements that will be rendered inside the toolbar of the TaskBoard. Example:

jsx

<TaskBoard>
  <Button>Add Task</Button>
</TaskBoard>

className?

string | string[]

Specifies a list of CSS classes that will be added to the TaskBoard element. Example:

jsx

<TaskBoard className="custom-taskboard" />

column?

ComponentType<TaskBoardColumnProps>

Represents the TaskBoardColumn component. Example:

jsx

<TaskBoard column={(props) => <div>{props.title}</div>} />

columnData

TaskBoardColumnModel[]

Specifies the column data from type TaskBoardColumnModel. Example:

jsx

<TaskBoard columnData={[
  { id: 1, title: 'To Do', status: 'todo' },
  { id: 2, title: 'In Progress', status: 'inProgress' }
]} />

id?

string

Specifies the id that will be added to the TaskBoard element. Example:

jsx

<TaskBoard id="taskboard-1" />

onChange

(event: TaskBoardChangeEvent) => void

Represents the onChange event. Triggered after tasks or columns are changed. Example:

jsx

<TaskBoard onChange={(event) => console.log(event.data)} />

Parameters:eventTaskBoardChangeEvent

priorities

TaskBoardPriority[]

Specifies the priorities of the task board. Example:

jsx

<TaskBoard priorities={[
  { priority: 'High', color: 'red' },
  { priority: 'Low', color: 'green' }
]} />

style?

CSSProperties

Represents the styles that are applied to the TaskBoard. Example:

jsx

<TaskBoard style={{ backgroundColor: 'lightgray' }} />

tabIndex?

number

Specifies the tabIndex that will be added to the TaskBoard Column and Card elements. Example:

jsx

<TaskBoard tabIndex={0} />

taskData

TaskBoardTaskModel[]

Represents the task data from type TaskBoardTaskModel. Example:

jsx

<TaskBoard taskData={[
  { id: 1, title: 'Task 1', status: 'todo', description: 'Description 1', priority: { priority: 'High', color: 'red' } },
  { id: 2, title: 'Task 2', status: 'inProgress', description: 'Description 2', priority: { priority: 'Low', color: 'green' } }
]} />

webMcp?

boolean | WebMcpProps

Enables Web MCP tool registration for this component. Requires a parent WebMcpProvider from @progress/kendo-react-webmcp.