KanbanBoard
TsgcHTMLComponent_KanbanBoard — genera un tablero kanban de columnas y tarjetas, con arrastrar y soltar opcional mediante SortableJS, en Delphi, C++ Builder y .NET.
TsgcHTMLComponent_KanbanBoard — genera un tablero kanban de columnas y tarjetas, con arrastrar y soltar opcional mediante SortableJS, en Delphi, C++ Builder y .NET.
Añade columnas, coloca tarjetas en cada una (o vincula un dataset agrupado por estado), habilita el arrastre opcionalmente, y luego lee la propiedad HTML.
TsgcHTMLComponent_KanbanBoard
Tablero de Bootstrap 5 + CSS encapsulado (SortableJS opcional)
Delphi, C++ Builder, .NET
Llama a AddColumn para cada carril, inserta tarjetas con el AddCard de la columna, habilita DragEnabled si quieres reordenar, y luego lee 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 CSSLos miembros que usarás con más frecuencia.
Columns contiene los carriles, cada uno con un Title, el enum Color, ColumnID y una colección Cards.
AddColumn(aTitle, aColor) añade un carril y devuelve la TsgcHTMLKanbanColumn para que puedas seguir añadiéndole tarjetas.
El AddCard(aTitle, aDescription, aColor, aAssignee, aTag, aTagColor) de una columna añade una tarjeta con descripción, responsable y etiqueta de color opcionales.
LoadFromDataSet(aDataSet, aGroupField, aTitleField, aDescField, aAssigneeField) crea una columna por cada valor de grupo distinto y una tarjeta por fila.
DragEnabled inyecta SortableJS para que las tarjetas se puedan arrastrar entre columnas; déjalo desactivado para un tablero estático.
BoardID identifica el tablero; Height limita el área de desplazamiento; HTML devuelve el tablero junto con su CSS encapsulado.