Class SfKanban<TValue>

Represents the Kanban component for managing tasks using cards within columns.

Inheritance

System.Object

SfBaseComponent

SfDataBoundComponent

SfKanban<TValue>

Implements

IKanban

Inherited Members

SfBaseComponent.Dispose()

SfDataBoundComponent.DataManager

SfDataBoundComponent.MainParent

SfDataBoundComponent.SetDataManager<T>(Object)

Namespace: Syncfusion.Blazor.Kanban

Assembly: Syncfusion.Blazor.dll

Syntax

public sealed class SfKanban<TValue> : SfDataBoundComponent, IKanban

Type Parameters

Name	Description
TValue	The type of card data that the Kanban handles.

Remarks

This component facilitates organizing and displaying tasks in a Kanban-style layout with extensive customization options, supporting drag-and-drop, swimlanes, and card templates.

Constructors

SfKanban()

Declaration

public SfKanban()

Properties

AllowDragAndDrop

Gets or sets a value indicating whether drag and drop actions are enabled in the Kanban.

Declaration

public bool AllowDragAndDrop { get; set; }

Property Value

Type	Description
System.Boolean	true if drag and drop actions can be enabled; otherwise, false. The default value is true.

Remarks

Enabling this feature allows users to reposition cards within and between columns on the Kanban board.

AllowKeyboard

Gets or sets a value indicating whether keyboard interaction is enabled in the Kanban board.

Declaration

public bool AllowKeyboard { get; set; }

Property Value

Type	Description
System.Boolean	true if keyboard interaction is enabled; otherwise, false. The default value is true.

Remarks

When enabled, users can utilize keyboard shortcuts for navigation and interaction with the Kanban board.

CardSettings

Defines the Kanban board related settings such as header field, content field, template, show or hide header, and single or multiple selection.

Declaration

public KanbanCardSettings CardSettings { get; set; }

Property Value

Type	Description
KanbanCardSettings	An instance of the KanbanCardSettings class that represents the Kanban card settings.

Remarks

This property allows customization of the cards' appearance and behavior by providing various configuration options.

Columns

Defines the Kanban board columns and their properties such as header text, key field, template, allow toggle, expand or collapse state, min or max count, and show or hide item count.

Declaration

public List<KanbanColumn> Columns { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<KanbanColumn>	A list of KanbanColumn objects that represent the Kanban board columns.

Remarks

Configure this property to set up the structure and behavior of each column within the Kanban board according to application requirements.

ConstraintType

Defines the constraint type used to apply validation based on column or swimlane. Possible values are Column and Swimlane.

Declaration

public ConstraintType ConstraintType { get; set; }

Property Value

Type	Description
ConstraintType	An enum value of the ConstraintType that represents the constraint type.

Remarks

Choose between column or swimlane constraints to ensure that operations are executed within the predefined validation conditions.

CssClass

Used to customize the Kanban by applying custom CSS class names for specific styles and themes.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	A string containing CSS classes separated by spaces to customize the component's appearance.

Remarks

Apply user-defined styles to the Kanban component through this property to achieve unique visual themes.

DataSource

Binds the list items either through local or remote service and assigns them to the component.

Declaration

public IEnumerable<TValue> DataSource { get; set; }

Property Value

Type	Description
System.Collections.Generic.IEnumerable<TValue>	An System.Collections.Generic.IEnumerable<> that represents the data bound to the Kanban component.

Remarks

This property allows the Kanban component to display data collections from local sources or from remote services using SfDataManager.

DataSourceChanged

Invoked when the data source changes.

Declaration

public EventCallback<IEnumerable<TValue>> DataSourceChanged { get; set; }

Property Value

Type	Description
Microsoft.AspNetCore.Components.EventCallback<System.Collections.Generic.IEnumerable<TValue>>	An Microsoft.AspNetCore.Components.EventCallback<> that is triggered on data source changes.

Remarks

Subscribe to this callback to execute additional logic when the Kanban's data source is modified.

DialogSettings

Defines the dialog settings such as template and fields.

Declaration

public KanbanDialogSettings DialogSettings { get; set; }

Property Value

Type	Description
KanbanDialogSettings	An instance of the KanbanDialogSettings class that represents the dialog settings.

Remarks

This property provides configuration for dialogs within the Kanban board, influencing their appearance and behavior.

EnableRtl

Enables or disables rendering of the component in the right-to-left direction.

Declaration

public bool EnableRtl { get; set; }

Property Value

Type	Description
System.Boolean	true if right-to-left direction can be enabled; otherwise, false. The default value is false.

Remarks

Activate this feature to support RTL languages by rendering the Kanban component accordingly.

EnableTooltip

Gets or sets a value indicating whether tooltips are enabled in the Kanban board.

Declaration

public bool EnableTooltip { get; set; }

Property Value

Type	Description
System.Boolean	true if tooltips can be enabled; otherwise, false.

Remarks

Tooltips provide additional contextual information about items on the Kanban board when enabled.

ExternalDropId

Defines the ID of the drop component on which drops should occur.

Declaration

public List<string> ExternalDropId { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<System.String>	A list of strings that represent the IDs of drop components where Kanban cards are allowed to be dropped.

Remarks

Specify external components that can integrate with the Kanban's drag-and-drop functionalities using this property.

Height

Specifies the height of the Kanban component, allowing both string and numeric values.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String	A string that specifies the component's height. The default value is "auto".

Remarks

• String values can represent pixel values (e.g., "100px") or percentages (e.g., "50%").
• When a specific pixel value is provided, the Kanban will occupy that exact height.
• A value of "auto" allows the Kanban to adjust dynamically to the available space within the container.

ID

Gets or sets the unique identifier for the Kanban component.

Declaration

public string ID { get; set; }

Property Value

Type	Description
System.String	A string representing the ID of the component.

Remarks

This ID is used to uniquely identify the Kanban component within the page, particularly useful in scenarios involving multiple Kanban instances.

KeyField

Defines the key field of the Kanban board.

Declaration

public string KeyField { get; set; }

Property Value

Type	Description
System.String	A string that determines how layout is organized in the Kanban based on the key field.

Remarks

This key field is integral to the Kanban's layout design, impacting card organization on the board.

Locale

Overrides the global culture and localization values for this component. Default global culture is 'en-US'.

Declaration

public string Locale { get; set; }

Property Value

Type	Description
System.String	A string specifying the culture and localization settings for the component.

Remarks

Use this property to apply a specific culture for the Kanban component, overriding default global settings.

Query

Defines the external Query that will be executed along with data processing.

Declaration

public Query Query { get; set; }

Property Value

Type	Description
Query	An object of type Query that represents the query executed alongside data processing.

Remarks

Incorporate custom queries with data operations within the Kanban board using this property.

SortSettings

Defines the sort settings such as field and direction.

Declaration

public KanbanSortSettings SortSettings { get; set; }

Property Value

Type	Description
KanbanSortSettings	An instance of the KanbanSortSettings class that specifies sorting preferences based on field and direction.

Remarks

Configure how items are ordered in the Kanban board by adjusting these sorting settings.

StackedHeaders

Defines the stacked header for Kanban columns with text and key fields.

Declaration

public List<KanbanStackedHeader> StackedHeaders { get; set; }

Property Value

Type	Description
System.Collections.Generic.List<KanbanStackedHeader>	A list of KanbanStackedHeader objects specifying stacked headers for Kanban columns.

Remarks

Utilize stacked headers to organize multiple columns under a single header, enhancing the board's readability and categorization.

SwimlaneSettings

Defines the swimlane settings for the Kanban board like key field, text field, template, allow drag-and-drop, show or hide an empty row, show or hide item count, and more.

Declaration

public KanbanSwimlaneSettings SwimlaneSettings { get; set; }

Property Value

Type	Description
KanbanSwimlaneSettings	An instance of the KanbanSwimlaneSettings class specifying swimlane configurations such as key fields, template, drag-and-drop, and more.

Remarks

Configure swimlanes to enhance organization within the Kanban board, including defining appearance and interactivity options.

Width

Specifies the width of the Kanban component, supporting both string and numeric values.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	A string representing the width of the component. The default is "auto".

Remarks

String values may define widths in pixels (e.g., "200px") or as a percentage of the container (e.g., "75%"). A width value of "auto" enables the Kanban to adjust its width dynamically according to the viewable screen size.

Methods

AddCardAsync(TValue, Int32)

Adds a new single card to the Kanban's data source at the specified index.

Declaration

public Task AddCardAsync(TValue cardData, int index = 0)

Parameters

Type	Name	Description
TValue	cardData	The data for the card to be added.
System.Int32	index	The index at which the card should be inserted.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

Integrates a new card into the Kanban board, allowing for precise insertion within the existing data structure.

Exceptions

Type	Condition
System.Exception	Thrown if there is an error adding the card.

AddCardAsync(List<TValue>, Int32)

Adds multiple new cards to the Kanban's data source at the specified index.

Declaration

public Task AddCardAsync(List<TValue> cardData, int index = 0)

Parameters

Type	Name	Description
System.Collections.Generic.List<TValue>	cardData	The list of card data to be added.
System.Int32	index	The index where the cards should be inserted.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

This method supports batch addition of cards, streamlining the process of expanding the Kanban board with multiple tasks.

Exceptions

Type	Condition
System.Exception	Thrown if there is an error adding the cards.

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

Type	Name	Description
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder	__builder

CloseDialogAsync()

Closes the dialog manually.

Declaration

public Task CloseDialogAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

Allows manual closure of the dialog, giving greater control over interaction flows within the board.

Exceptions

Type	Condition
System.Exception	Thrown if there is an error closing the dialog.

DeleteCardAsync(TValue)

Deletes a card from the Kanban's data source based on the provided card data.

Declaration

public Task DeleteCardAsync(TValue cardData)

Parameters

Type	Name	Description
TValue	cardData	Specifies the card data to be deleted.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

Efficiently removes a card from the data collection, reflecting the deletion immediately on the Kanban board.

Exceptions

Type	Condition
System.Exception	Thrown if there is an error deleting the card.

DeleteCardAsync(List<TValue>)

Deletes cards from the Kanban's data source based on the provided list of card data.

Declaration

public Task DeleteCardAsync(List<TValue> cardData)

Parameters

Type	Name	Description
System.Collections.Generic.List<TValue>	cardData	Specifies the list of card data to be deleted.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

Allows for the removal of multiple cards in one operation, keeping the board layout updated and accurate.

Exceptions

Type	Condition
System.Exception	Thrown if there is an error deleting the cards.

DeleteCardAsync(Int32)

Deletes a card from the Kanban's data source based on the provided ID as an integer.

Declaration

public Task DeleteCardAsync(int id)

Parameters

Type	Name	Description
System.Int32	id	Specifies the card ID as an integer.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

Removes a card by its integer ID, maintaining the board's data integrity and visual accuracy.

Exceptions

Type	Condition
System.Exception	Thrown if there is an error deleting the card.

DeleteCardAsync(String)

Deletes a card from the Kanban's data source based on the provided ID as a string.

Declaration

public Task DeleteCardAsync(string id)

Parameters

Type	Name	Description
System.String	id	Specifies the card ID as a string.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

Identifies and removes a card using its string ID, ensuring the board reflects the correct task removals.

Exceptions

Type	Condition
System.Exception	Thrown if there is an error deleting the card.

DeleteColumnAsync(Int32)

Deletes a column in the Kanban board based on the provided column index.

Declaration

public Task DeleteColumnAsync(int index)

Parameters

Type	Name	Description
System.Int32	index	Specifies the column index to be deleted.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

Facilitates the removal of a column, allowing for dynamic adjustments to the board's structure.

Exceptions

Type	Condition
System.Exception	Thrown if there is an error deleting the column.

Dispose(Boolean)

Declaration

protected override void Dispose(bool disposing)

Parameters

Type	Name	Description
System.Boolean	disposing

Overrides

SfBaseComponent.Dispose(Boolean)

GetColumnDataByKeys(List<String>)

Retrieves column data for the SfKanban<TValue> based on specified column key field keys.

Declaration

public List<TValue> GetColumnDataByKeys(List<string> keys)

Parameters

Type	Name	Description
System.Collections.Generic.List<System.String>	keys	Specifies the list of KanbanColumn key field keys.

Returns

Type	Description
System.Collections.Generic.List<TValue>	Returns a list of data associated with the specified columns.

Remarks

This method searches all columns in the SfKanban<TValue> and returns the data collections for columns matching the specified key field.

Examples

<button @onclick="@GetKanbanColumnData">Get Column Data</button>
<SfKanban @ref="kanbanObj" KeyField="Status" DataSource="@cardData">
 ........
</SfKanban>
@code{
   SfKanban<KanbanDataModel> kanbanObj;
   public void GetKanbanColumnData()
   {
        var data = this.kanbanObj.GetColumnDataByKeys(new List<string> { "Open" });
   }
}

Exceptions

Type	Condition
System.Exception	Thrown if there is an error retrieving column data.

GetSwimlaneData(String)

Returns the swimlane column data based on the swimlane key field.

Declaration

public List<TValue> GetSwimlaneData(string keyField)

Parameters

Type	Name	Description
System.String	keyField	Specifies the key field for the swimlane.

Returns

Type	Description
System.Collections.Generic.List<TValue>	Returns a list of swimlane column data.

Remarks

Facilitates retrieval of data organized by swimlanes, allowing for advanced categorization and filtering within the board.

Exceptions

Type	Condition
System.Exception	Thrown if there is an error retrieving swimlane data.

GetTargetDetailsAsync(Double, Double)

Returns card details based on top and left coordinates relative to the Kanban board.

Declaration

public Task<KanbanTargetDetails<TValue>> GetTargetDetailsAsync(double left, double top)

Parameters

Type	Name	Description
System.Double	left	The left coordinate (x) relative to the Kanban board.
System.Double	top	The top coordinate (y) relative to the Kanban board.

Returns

Type	Description
System.Threading.Tasks.Task<KanbanTargetDetails<TValue>>	The target details containing card information.

Remarks

Provides card details based on the mouse cursor's position, enhancing usability with dynamic interactions.

Exceptions

Type	Condition
System.Exception	Thrown if there is an error retrieving target details.

HideSpinnerAsync()

Manually hides the spinner if it was previously displayed.

Declaration

public Task HideSpinnerAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

Gives users control over the spinner's visibility to indicate processing completion or interruptions.

Exceptions

Type	Condition
System.Exception	Thrown if the spinner cannot be hidden.

OnAfterRenderAsync(Boolean)

Method invoked after each time the component has been rendered.

Declaration

protected override Task OnAfterRenderAsync(bool firstRender)

Parameters

Type	Name	Description
System.Boolean	firstRender	Set to true if this is the first time OnAfterRender(Boolean) has been invoked.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfDataBoundComponent.OnAfterRenderAsync(Boolean)

OnInitializedAsync()

Declaration

protected override Task OnInitializedAsync()

Returns

Type
System.Threading.Tasks.Task

Overrides

SfDataBoundComponent.OnInitializedAsync()

OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

Overridable Method for INotifyCollectionChanged event handler to track the changes.

Declaration

protected override void OnObservableChange(string propertyName, object sender, bool isCollectionChanged = false, NotifyCollectionChangedEventArgs e = null)

Parameters

Type	Name	Description
System.String	propertyName	Observable property name.
System.Object	sender	Observable model object.
System.Boolean	isCollectionChanged	Sets true if the observable collection changed.
System.Collections.Specialized.NotifyCollectionChangedEventArgs	e	Changed Event Args

Overrides

SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)

OnParametersSetAsync()

Method invoked when the component has received parameters from its parent.

Declaration

protected override Task OnParametersSetAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Overrides

SfDataBoundComponent.OnParametersSetAsync()

OpenDialogAsync(CurrentAction, TValue)

Opens a dialog manually with the specified action and data.

Declaration

public Task OpenDialogAsync(CurrentAction action, TValue data)

Parameters

Type	Name	Description
CurrentAction	action	The action to be performed.
TValue	data	The data related to the action.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

Provides direct control over dialog actions within the Kanban board, enabling custom workflows.

Exceptions

Type	Condition
System.Exception	Thrown if there is an error opening the dialog.

RefreshAsync()

Refreshes the Kanban header and content, updating the display state.

Declaration

public Task RefreshAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

Triggers a complete update of the board's layout, ensuring that all visual components reflect the latest data state.

Exceptions

Type	Condition
System.Exception	Thrown if there is an error refreshing the Kanban board.

ShowSpinnerAsync()

By default, Kanban shows the spinner for all its actions. This method allows showing the spinner at a custom time.

Declaration

public Task ShowSpinnerAsync()

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

Use this method to manually display the spinner whenever an operation requires user visual feedback for processing.

Exceptions

Type	Condition
System.Exception	Thrown if the spinner cannot be shown.

UpdateCardAsync(TValue, Int32)

Updates an existing card's data in the Kanban's data source at the specified index.

Declaration

public Task UpdateCardAsync(TValue cardData, int index)

Parameters

Type	Name	Description
TValue	cardData	The updated card data.
System.Int32	index	The index where the card should be updated.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

Facilitates the modification of card details, ensuring that updated task information is correctly reflected in the Kanban board.

Exceptions

Type	Condition
System.Exception	Thrown if there is an error updating the card.

UpdateCardAsync(List<TValue>, Int32)

Updates multiple cards in the Kanban's data source at the specified index.

Declaration

public Task UpdateCardAsync(List<TValue> cardData, int index)

Parameters

Type	Name	Description
System.Collections.Generic.List<TValue>	cardData	The list of updated card data.
System.Int32	index	The index where the cards should be updated.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

Enables batch updates to the data source, maintaining consistency and up-to-date task information in the board layout.

Exceptions

Type	Condition
System.Exception	Thrown if there is an error updating the cards.

UpdateViewDataAsync(IEnumerable<TValue>)

Asynchronously updates the Kanban board with the provided data.

Declaration

public Task UpdateViewDataAsync(IEnumerable<TValue> data)

Parameters

Type	Name	Description
System.Collections.Generic.IEnumerable<TValue>	data	The data to be used for updating the Kanban board.

Returns

Type	Description
System.Threading.Tasks.Task	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

Incorporates a new data set into the board, ensuring comprehensive updates to displayed tasks.

Exceptions

Type	Condition
System.Exception	Thrown if there is an error updating the view data.

Explicit Interface Implementations

IKanban.KanbanTemplates

Enables or disables template customization in the Kanban board.

Declaration

KanbanTemplates IKanban.KanbanTemplates { get; set; }

Returns

Type
KanbanTemplates

Implements

IKanban