Class SfKanban<TValue>

The Kanban component is an efficient way to visually depict various stages of a process using cards with transparent workflows.

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
TValue

Constructors

SfKanban()

Declaration

public SfKanban()

Properties

AllowDragAndDrop

Enables or disables the drag and drop actions in the Kanban.

Declaration

public bool AllowDragAndDrop { get; set; }

Property Value

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

AllowKeyboard

When this property is set to true, it allows the keyboard interaction in the Kanban board.

Declaration

public bool AllowKeyboard { get; set; }

Property Value

Type	Description
System.Boolean	true, if the keyboard interaction can be enabled in the component. Otherwise, false. The default value is true.

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.

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.

ConstraintType

Defines the constraint type used to apply validation based on column or swimlane. The possible values are: Column Swimlane.

Declaration

public ConstraintType ConstraintType { get; set; }

Property Value

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

CssClass

It is used to customize the Kanban, which accepts custom CSS class names that define specific user-defined styles and themes to be applied on the Kanban element.

Declaration

public string CssClass { get; set; }

Property Value

Type	Description
System.String	Accepts the CSS class string separated by space to customize the appearance of component.

DataSource

Accepts the list items either through local or remote service and binds it to the component. It can be passed either as List or else can create an instance of the SfDataManager in case of processing remote data and can be assigned to the DataSource property.

Declaration

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

Property Value

Type	Description
System.Collections.Generic.IEnumerable<TValue>	Binding data to the kanban component.

DataSourceChanged

Invokes when data source changes.

Declaration

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

Property Value

Type
Microsoft.AspNetCore.Components.EventCallback<System.Collections.Generic.IEnumerable<TValue>>

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.

EnableRtl

Enable or disable rendering component in the right to left direction.

Declaration

public bool EnableRtl { get; set; }

Property Value

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

EnableTooltip

Enables or disables the tooltip in the Kanban board. The property relates to the tooltipTemplate property.

Declaration

public bool EnableTooltip { get; set; }

Property Value

Type	Description
System.Boolean	true, if the tooltip can be enabled in the component. Otherwise, false.

ExternalDropId

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

Declaration

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

Property Value

Type	Description
System.Collections.Generic.List<System.String>	Accepts a list of strings that represents the ID of the drop component on which the drop should occur.

Height

Sets the Height of the Kanban component, accepting both string and number values. The string type includes either pixel or percentage values. When height is set with specific pixel value, then the Kanban will be rendered to that specified space. In case, if auto value is set, then the height of the Kanban gets auto-adjusted within the given container.

Declaration

public string Height { get; set; }

Property Value

Type	Description
System.String	Accepts the string value. The default value is AUTO.

ID

Specifies the unique identifier.

Declaration

public string ID { get; set; }

Property Value

Type
System.String

KeyField

Defines the key field of the Kanban board. The Kanban renders its layout based on this key field.

Declaration

public string KeyField { get; set; }

Property Value

Type	Description
System.String	Accepts the string value.

Locale

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

Declaration

public string Locale { get; set; }

Property Value

Type	Description
System.String	Accepts the string value.

Query

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

Declaration

public Query Query { get; set; }

Property Value

Type	Description
Query	An object of type Query that represents the query will be executed along with data processing.

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 defines the sort settings such as field and direction.

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 object that specifies the stacked header for kanban columns with text and key fields.

SwimlaneSettings

Defines the swimlane settings to the Kanban board such as key field, text field, template, allow drag-and-drop, show or hide an empty row, show or hide items count, and more.

Declaration

public KanbanSwimlaneSettings SwimlaneSettings { get; set; }

Property Value

Type	Description
KanbanSwimlaneSettings	An instance of the KanbanSwimlaneSettings class that specifies the swimlane setting to kanban such as key field, template, drag amd drop amd more.

Width

Sets the Width of the Kanban component, accepting both string and number values. The string value can be either pixel or percentage format. When set to auto, the Kanban width gets auto-adjusted and displays its content related to the viewable screen size.

Declaration

public string Width { get; set; }

Property Value

Type	Description
System.String	Accepts the string value. The default value is AUTO.

Methods

AddCardAsync(TValue, Int32)

Adds the new single card to the data source of Kanban and layout.

Declaration

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

Parameters

Type	Name	Description
TValue	cardData	Specifies the card data.
System.Int32	index	Specifies the index where it to be inserted.

Returns

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

AddCardAsync(List<TValue>, Int32)

Adds the new more number of cards to the data source of Kanban and layout.

Declaration

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

Parameters

Type	Name	Description
System.Collections.Generic.List<TValue>	cardData	Specifies the list of card data.
System.Int32	index	Specifies the index where it to be inserted.

Returns

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

BuildRenderTree(RenderTreeBuilder)

Declaration

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters

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

CloseDialogAsync()

To manually close the dialog.

Declaration

public Task CloseDialogAsync()

Returns

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

DeleteCardAsync(TValue)

Deletes the card based on provided 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.

DeleteCardAsync(List<TValue>)

Deletes the card based on card collection in the argument list.

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.

DeleteCardAsync(Int32)

Deletes the card based on the provided ID as Integer.

Declaration

public Task DeleteCardAsync(int id)

Parameters

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

Returns

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

DeleteCardAsync(String)

Deletes the card based on the provided ID as String.

Declaration

public Task DeleteCardAsync(string id)

Parameters

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

Returns

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

DeleteColumnAsync(Int32)

To delete the column based on the provided the columns index.

Declaration

public Task DeleteColumnAsync(int index)

Parameters

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

Returns

Type
System.Threading.Tasks.Task

Dispose(Boolean)

Declaration

protected override void Dispose(bool disposing)

Parameters

Type	Name	Description
System.Boolean	disposing

Overrides

SfBaseComponent.Dispose(Boolean)

GetColumnDataByKeys(List<String>)

Get the column data of the SfKanban<TValue> based on an array of column KeyField keys.

Declaration

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

Parameters

Type	Name	Description
System.Collections.Generic.List<System.String>	keys	Specifies the corresponding KanbanColumn KeyField keys.

Returns

Type	Description
System.Collections.Generic.List<TValue>	A System.Threading.Tasks.Task representing any asynchronous operation.

Remarks

This method searches through all columns in the SfKanban<TValue> and returns the collection of data for the column whose field name matches the specified column key parameter.

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" });
   }
}

GetSwimlaneData(String)

Returns the swimlane column data based on the swimlane keyField input.

Declaration

public List<TValue> GetSwimlaneData(string keyField)

Parameters

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

Returns

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

GetTargetDetailsAsync(Double, Double)

Returns the target details which contains the card details based on top and left co-ordinates relative to Kanban.

Declaration

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

Parameters

Type	Name	Description
System.Double	left	The left co-ordinate (x) relative to Kanban.
System.Double	top	The right co-ordinate (x) relative to Kanban.

Returns

Type	Description
System.Threading.Tasks.Task<KanbanTargetDetails<TValue>>	The targeted details.

Remarks

It returns the card details based on the mouse cursor position.

HideSpinnerAsync()

Manually showed spinner needs to hide by HideSpinner.

Declaration

public Task HideSpinnerAsync()

Returns

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

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)

To manually open the dialog.

Declaration

public Task OpenDialogAsync(CurrentAction action, TValue data)

Parameters

Type	Name	Description
CurrentAction	action	Specifies the action.
TValue	data	Specifies the data.

Returns

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

RefreshAsync()

Refreshes the Kanban header and content.

Declaration

public Task RefreshAsync()

Returns

Type
System.Threading.Tasks.Task

ShowSpinnerAsync()

By default, Kanban shows the spinner for all its actions. You can use this method to show spinner at your needed time.

Declaration

public Task ShowSpinnerAsync()

Returns

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

UpdateCardAsync(TValue, Int32)

Updates the changes made in the card object by passing it as a parameter to the data source.

Declaration

public Task UpdateCardAsync(TValue cardData, int index)

Parameters

Type	Name	Description
TValue	cardData	Specifies the card data.
System.Int32	index	Specifies the index where it to be updated.

Returns

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

UpdateCardAsync(List<TValue>, Int32)

Update the more number of cards to the data source of Kanban.

Declaration

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

Parameters

Type	Name	Description
System.Collections.Generic.List<TValue>	cardData	Specifies the list of card data.
System.Int32	index	Specifies the index where it to be updated.

Returns

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

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
System.Threading.Tasks.Task

Explicit Interface Implementations

IKanban.KanbanTemplates

Enables or disables template in the Kanban board. The property relates to the tooltipTemplate property.

Declaration

KanbanTemplates IKanban.KanbanTemplates { get; set; }

Returns

Type
KanbanTemplates

Implements

IKanban