KanbanBoard
TsgcHTMLComponent_KanbanBoard — render a kanban board of columns and cards, with optional SortableJS drag-and-drop, in Delphi, C++ Builder and .NET.
TsgcHTMLComponent_KanbanBoard — render a kanban board of columns and cards, with optional SortableJS drag-and-drop, in Delphi, C++ Builder and .NET.
Add columns, drop cards into each (or bind a dataset grouped by status), optionally enable dragging, then read the HTML property.
TsgcHTMLComponent_KanbanBoard
Bootstrap 5 board + scoped CSS (optional SortableJS)
Delphi, C++ Builder, .NET
Call AddColumn for each lane, push cards with the column's AddCard, enable DragEnabled if you want reordering, then read HTML.
uses
sgcHTML_Enums, sgcHTML_Component_KanbanBoard;
var
oBoard: TsgcHTMLComponent_KanbanBoard;
oCol: TsgcHTMLKanbanColumn;
begin
oBoard := TsgcHTMLComponent_KanbanBoard.Create(nil);
try
oBoard.BoardID := 'sprint';
oBoard.Height := '500px';
oBoard.DragEnabled := True;
oCol := oBoard.AddColumn('To Do', hcSecondary);
oCol.AddCard('Draft spec', 'Outline the API.', hcLight, 'Ana');
oBoard.AddColumn('Done', hcSuccess);
WebModule.Response := oBoard.HTML; // board + scoped CSS
finally
oBoard.Free;
end;
end;
// Or bind it straight to a dataset (grouped by status):
oBoard.LoadFromDataSet(qryTasks, 'Status', 'Title', 'Notes', 'Owner');// includes: sgcHTML_Enums.hpp, sgcHTML_Component_KanbanBoard.hpp
TsgcHTMLComponent_KanbanBoard *oBoard = new TsgcHTMLComponent_KanbanBoard(NULL);
try
{
oBoard->BoardID = "sprint";
oBoard->Height = "500px";
oBoard->DragEnabled = true;
TsgcHTMLKanbanColumn *oCol = oBoard->AddColumn("To Do", hcSecondary);
oCol->AddCard("Draft spec", "Outline the API.", hcLight, "Ana");
oBoard->AddColumn("Done", hcSuccess);
String html = oBoard->HTML; // board + scoped CSS
}
__finally
{
delete oBoard;
}using esegece.sgcWebSockets;
var board = new TsgcHTMLComponent_KanbanBoard();
board.BoardID = "sprint";
board.Height = "500px";
board.DragEnabled = true;
var col = board.AddColumn("To Do", TsgcHTMLColor.hcSecondary);
col.AddCard("Draft spec", "Outline the API.", TsgcHTMLColor.hcLight, "Ana");
board.AddColumn("Done", TsgcHTMLColor.hcSuccess);
string html = board.HTML; // board + scoped CSSThe members you reach for most often.
Columns holds the lanes, each with a Title, enum Color, ColumnID and a Cards collection.
AddColumn(aTitle, aColor) appends a lane and returns the TsgcHTMLKanbanColumn so you can keep adding cards to it.
A column's AddCard(aTitle, aDescription, aColor, aAssignee, aTag, aTagColor) adds a card with an optional description, assignee and coloured tag badge.
LoadFromDataSet(aDataSet, aGroupField, aTitleField, aDescField, aAssigneeField) builds one column per distinct group value and a card per row.
DragEnabled injects SortableJS so cards can be dragged between columns; leave it off for a static board.
BoardID identifies the board; Height caps the scroll area; HTML returns the board plus its scoped CSS.