Events and Custom Actions in Blazor Kanban

This guide provides a comprehensive overview of the available events in the Blazor Kanban component. These events enable developers to customize behavior and respond to user interactions effectively.

OnLoad event

OnLoad is triggered before the Kanban component is rendered, allowing customization of its properties.

@using Syncfusion.Blazor.Kanban

<SfKanban TValue="TasksModel">
   <KanbanEvents TValue="TasksModel" OnLoad="@OnLoadHandler" ></KanbanEvents>
</SfKanban>
@code{

    public void OnLoadHandler(Object args)
    {
        // Code customization can be performed here.
    }
}

ActionBegin event

ActionBegin event triggers at the beginning of every Kanban action.

@using Syncfusion.Blazor.Kanban

<SfKanban TValue="TasksModel">
   <KanbanEvents TValue="TasksModel" ActionBegin="@ActionBeginHandler" ></KanbanEvents>
</SfKanban>
@code{

    public void ActionBeginHandler(ActionEventArgs<TValue> args)
    {
        // Code customization can be performed here.
    }
}

ActionComplete event

ActionComplete is triggered after a Kanban action completes successfully.

@using Syncfusion.Blazor.Kanban

<SfKanban TValue="TasksModel">
   <KanbanEvents TValue="TasksModel" ActionComplete="@ActionCompleteHandler" ></KanbanEvents>
</SfKanban>
@code{

    public void ActionCompleteHandler(ActionEventArgs<TValue> args)
    {
        // Code customization can be performed here.
    }
}

ActionFailure event

ActionFailure is triggered when a Kanban action fails or is interrupted, providing error details.

@using Syncfusion.Blazor.Kanban

<SfKanban TValue="TasksModel">
   <KanbanEvents TValue="TasksModel" ActionFailure="@ActionFailureHandler" ></KanbanEvents>
</SfKanban>
@code{

    public void ActionFailureHandler(ActionEventArgs<TValue> args)
    {
        // Code customization can be performed here.
    }
}

CardClick event

CardClick is triggered when a user clicks on a Kanban card.

@using Syncfusion.Blazor.Kanban

<SfKanban TValue="TasksModel">
   <KanbanEvents TValue="TasksModel" CardClick="@CardClickHandler" ></KanbanEvents>
</SfKanban>
@code{

    public void CardClickHandler(CardClickEventArgs<TValue> args)
    {
        // Code customization can be performed here.
    }
}

CardDoubleClick event

CardDoubleClick is triggered when a user double-clicks a Kanban card.

@using Syncfusion.Blazor.Kanban

<SfKanban TValue="TasksModel">
   <KanbanEvents TValue="TasksModel" CardDoubleClick="@CardDoubleClickHandler" ></KanbanEvents>
</SfKanban>
@code{

    public void CardDoubleClickHandler(CardClickEventArgs<TValue> args)
    {
        // Code customization can be performed here.
    }
}

CardRendered event

CardRendered is triggered before each Kanban card is rendered on the page.

@using Syncfusion.Blazor.Kanban

<SfKanban TValue="TasksModel">
   <KanbanEvents TValue="TasksModel" CardRendered="@CardRenderedHandler" ></KanbanEvents>
</SfKanban>
@code{

    public void CardRenderedHandler(CardRenderedEventArgs<TValue> args)
    {
        // Code customization can be performed here.
    }
}

DataBinding event

DataBinding is triggered before data is bound to the Kanban component.

@using Syncfusion.Blazor.Kanban

<SfKanban TValue="TasksModel">
   <KanbanEvents TValue="TasksModel" DataBinding="@DataBindingHandler" ></KanbanEvents>
</SfKanban>
@code{

    public void DataBindingHandler(DataBindingEventArgs<TValue> args)
    {
        // Code customization can be performed here.
    }
}

DialogClose event

DialogClose is triggered before the Kanban dialog closes.

@using Syncfusion.Blazor.Kanban

<SfKanban TValue="TasksModel">
   <KanbanEvents TValue="TasksModel" DialogClose="@DialogCloseHandler" ></KanbanEvents>
</SfKanban>
@code{

    public void DialogCloseHandler(DialogCloseEventArgs<TValue> args)
    {
        // Code customization can be performed here.
    }
}

DialogOpen event

DialogOpen is triggered before the Kanban dialog opens.

@using Syncfusion.Blazor.Kanban

<SfKanban TValue="TasksModel">
   <KanbanEvents TValue="TasksModel" DialogOpen="@DialogOpenHandler" ></KanbanEvents>
</SfKanban>
@code{

    public void DialogOpenHandler(DialogOpenEventArgs<TValue> args)
    {
        // Code customization can be performed here.
    }
}

DragStart event

DragStart is triggered when a card drag operation begins.

@using Syncfusion.Blazor.Kanban

<SfKanban TValue="TasksModel">
   <KanbanEvents TValue="TasksModel" DragStart="@DragStartHandler" ></KanbanEvents>
</SfKanban>
@code{

    public void DragStartHandler(DragEventArgs<TValue> args)
    {
        // Code customization can be performed here.
    }
}

DragStop event

DragStop is triggered when a card drag operation ends.

@using Syncfusion.Blazor.Kanban

<SfKanban TValue="TasksModel">
   <KanbanEvents TValue="TasksModel" DragStop="@DragStopHandler" ></KanbanEvents>
</SfKanban>
@code{

    public void DragStopHandler(DragEventArgs<TValue> args)
    {
        // Code customization can be performed here.
    }
}

QueryCellInfo event

QueryCellInfo is triggered before each Kanban column is rendered on the page.

@using Syncfusion.Blazor.Kanban

<SfKanban TValue="TasksModel">
   <KanbanEvents TValue="TasksModel" QueryCellInfo="@QueryCellInfoHandler" ></KanbanEvents>
</SfKanban>
@code{

    public void QueryCellInfoHandler(QueryCellInfoEventArgs<TValue> args)
    {
        // Code customization can be performed here.
    }
}