Event Handling in Blazor Kanban Component

7 Oct 20254 minutes to read

his 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)
    {
        // Here you can customize your code
    }
}

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)
    {
        // Here you can customize your code
    }
}

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)
    {
        // Here you can customize your code
    }
}

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)
    {
        // Here you can customize your code
    }
}

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)
    {
        // Here you can customize your code
    }
}

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)
    {
        // Here you can customize your code
    }
}

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)
    {
        // Here you can customize your code
    }
}

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)
    {
        // Here you can customize your code
    }
}

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)
    {
        // Here you can customize your code
    }
}

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)
    {
        // Here you can customize your code
    }
}

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)
    {
        // Here you can customize your code
    }
}

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)
    {
        // Here you can customize your code
    }
}

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)
    {
        // Here you can customize your code
    }
}