dxKanban

Namespace: Wisej.Web.Ext.DevExtreme

Assembly: Wisej.Web.Ext.DevExtreme (4.1.0.0)

• Control
  • Widget
    • dxBase
      • dxKanban

Represents a Kanban board using DevExtreme widgets.

C#

public class dxKanban : dxBase

VB.NET

Public Class dxKanban
    Inherits dxBase

The board displays each Group in the Groups collection as a column and each Item in the group as a card. The user can drag the cards within a column and between columns, and can reorder the columns by dragging their title.

Assign a unique ID to each group and a unique ID to each item: the IDs are used to identify the group and the item involved in the click and drag events.

Example:

The following example creates a board with two columns and handles the event fired when the user moves a card.

var kanban = new dxKanban();
kanban.Dock = DockStyle.Fill;

var todo = new dxKanban.Group { ID = "todo", GroupName = "To Do" };
todo.Items.Add(new dxKanban.Item { ID = "1", Title = "Write the specifications", Description = "Anna", Color = Color.Orange });
todo.Items.Add(new dxKanban.Item { ID = "2", Title = "Review the design", Description = "Marco", Color = Color.SeaGreen });
var done = new dxKanban.Group { ID = "done", GroupName = "Done" };

kanban.Groups.AddRange(new[] { todo, done });

kanban.ItemDragEnd += (s, e) =>
{
	AlertBox.Show($"{e.Item.Title} moved from {e.FromGroup.GroupName} to {e.ToGroup.GroupName}");
};

this.Controls.Add(kanban);

Constructors

dxKanban()

Constructs a new instance of the dxKanban class.

Example:

The following example creates an empty board and adds a group with one item.

var kanban = new dxKanban();
kanban.Dock = DockStyle.Fill;
this.Controls.Add(kanban);

var backlog = new dxKanban.Group { ID = "backlog", GroupName = "Backlog" };
backlog.Items.Add(new dxKanban.Item { ID = "1", Title = "Upgrade the server", Description = "Unassigned" });
kanban.Groups.Add(backlog);

dxKanban(options)

Constructs a new instance of the dxKanban class with the specified options.

Name	Type	Description
options	Object	Initial set of options.

The options are passed to the DevExtreme dxSortable widget that hosts the columns of the board. The filter, handle, itemOrientation and moveItemOnDrop options are set by the control.

Example:

The following example creates a board that prevents the user from reordering the columns.

var kanban = new dxKanban(new { allowReordering = false });
kanban.Dock = DockStyle.Fill;
kanban.Groups.Add(new dxKanban.Group { ID = "todo", GroupName = "To Do" });
kanban.Groups.Add(new dxKanban.Group { ID = "done", GroupName = "Done" });
this.Controls.Add(kanban);

Properties

Groups

GroupCollection: Gets or sets the item groups for the Kanban board.

Each group is displayed as a column of the board. Adding or removing groups and items updates the board in the browser. Use BeginUpdate and EndUpdate to group several changes.

Setting this property does not replace the collection: it clears the current groups and adds the groups in the assigned collection.

Example:

The following example adds a group to the board, adds an item to an existing group and removes another group.

this.dxKanban1.Groups.Add(new dxKanban.Group { ID = "review", GroupName = "In Review" });

var todo = this.dxKanban1.Groups.First(g => g.ID == "todo");
todo.Items.Add(new dxKanban.Item { ID = "15", Title = "Update the manual", Description = "Anna" });

var archived = this.dxKanban1.Groups.First(g => g.ID == "archived");
this.dxKanban1.Groups.Remove(archived);

ItemOrientation

Orientation: Gets or sets the orientation of the items. (Default: Horizontal)

The value is stored, in lower case, in the itemOrientation option passed to the DevExtreme dxSortable widget that hosts the columns of the board.

ScrollViewDirection

Orientation: Gets or sets the orientation of the scroll view. (Default: Vertical)

The value is stored in the scrollViewDirection field of Options.

Methods

BeginUpdate()

Prevents the control from updating until the EndUpdate method is called.

Calls to BeginUpdate can be nested: the board is updated when EndUpdate has been called the same number of times.

Example:

The following example changes several items and updates the board in the browser only once.

this.dxKanban1.BeginUpdate();
try
{
	foreach (var item in this.dxKanban1.Groups[0].Items)
	{
		item.Color = Color.Red;
		item.Description = "Overdue";
	}
}
finally
{
	this.dxKanban1.EndUpdate();
}

EndUpdate()

Resumes updating of the kanban control after suspending it by the BeginUpdate method.

The board is updated in the browser when the call matches the first call to BeginUpdate.

Example:

The following example fills a group with the items returned by a query and updates the board when all the items have been added.

var group = this.dxKanban1.Groups[0];

this.dxKanban1.BeginUpdate();
group.Items.Clear();
foreach (var task in tasks)
	group.Items.Add(new dxKanban.Item { ID = task.Id.ToString(), Title = task.Subject, Description = task.Owner });
this.dxKanban1.EndUpdate();

OnWidgetEvent(e)

Parameter	Type	Description
e	WidgetEventArgs

Events

ItemClick

ItemClickEventHandler Occurs when an item is clicked.

ItemDoubleClick

ItemClickEventHandler Occurs when an item is double-clicked.

ItemDragEnd

ItemDragEventHandler Fired when an item is dropped.

When the event is fired the item has already been removed from the Items collection of FromGroup and added at the end of the Items collection of ToGroup. When the item is dropped in the group it was dragged from, the two properties return the same group.

Example:

The following example saves the new status of an item when the user moves it to a different group.

this.dxKanban1.ItemDragEnd += (s, e) =>
{
	if (e.FromGroup != e.ToGroup)
		UpdateTaskStatus(e.Item.ID, e.ToGroup.ID);
};

ItemRightClick

ItemClickEventHandler Occurs when an item is right-clicked.

The default context menu of the browser is not displayed when the user right-clicks an item.

Implements

Name	Description
IUserData
IBindableComponent
IDropTarget
IWisejComponent
IWisejControl
IWisejHandler
IWisejSerializable