Events in Blazor Kanban Component

10 Jun 20224 minutes to read

This section explains the list of events of the Blazor Kanban component which will be triggered for appropriate Kanban actions.

OnLoad

OnLoad event allows customization of Kanban properties before rendering.

@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

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

ActionComplete event triggers on successful completion of the Kanban actions.

@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

ActionFailure event triggers when a Kanban action gets failed or interrupted and it will return an error information.

@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

CardClick event triggers on single-clicking the Kanban cards.

@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

CardDoubleClick event triggers on double-clicking the Kanban cards.

@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

CardRendered event triggers before each card of the Kanban rendering 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

DataBinding event triggers before the data binds to the Kanban.

@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

DialogClose event triggers before the 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

DialogOpen event triggers before the 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

DragStart event triggers when the card drag actions start.

@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

DragStop event triggers when the card drag actions stop.

@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

QueryCellInfo event triggers before each column of the Kanban rendering 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
    }
}