menu

Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfKanban<TValue> - Blazor API Reference | Syncfusion

    Show / Hide Table of Contents

    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
    Back to top Generated by DocFX
    Copyright © 2001 - 2025 Syncfusion Inc. All Rights Reserved