Auf einen Blick

TsgcHTMLComponent_KanbanBoard

Fügen Sie Spalten hinzu, legen Sie Karten in jede ab (oder binden Sie ein nach Status gruppiertes Dataset), aktivieren Sie optional das Ziehen und lesen Sie dann die HTML-Eigenschaft.

Komponentenklasse

TsgcHTMLComponent_KanbanBoard

Rendert

Bootstrap-5-Board + scoped CSS (optional SortableJS)

Familie

Daten & Tabellen

Sprachen

Delphi, C++ Builder, .NET

QuickStart

Spalten hinzufügen, Karten hinzufügen, rendern

Rufen Sie AddColumn für jede Spur auf, fügen Sie Karten mit dem AddCard der Spalte hinzu, aktivieren Sie DragEnabled, wenn Sie Umsortieren möchten, und lesen Sie dann 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 CSS

Referenz

Wichtige Eigenschaften & Methoden

Die Member, die Sie am häufigsten verwenden.

Spalten

Columns enthält die Spuren, jede mit einem Title, Enum-Color, ColumnID und einer Cards-Sammlung.

Spalten hinzufügen

AddColumn(aTitle, aColor) hängt eine Spur an und gibt die TsgcHTMLKanbanColumn zurück, sodass Sie ihr weiterhin Karten hinzufügen können.

Karten

Das AddCard(aTitle, aDescription, aColor, aAssignee, aTag, aTagColor) einer Spalte fügt eine Karte mit optionaler Beschreibung, Verantwortlichem und farbigem Tag-Abzeichen hinzu.

Dataset-Bindung

LoadFromDataSet(aDataSet, aGroupField, aTitleField, aDescField, aAssigneeField) erstellt eine Spalte pro eindeutigem Gruppenwert und eine Karte pro Zeile.

Drag-and-Drop

DragEnabled fügt SortableJS ein, sodass Karten zwischen Spalten gezogen werden können; lassen Sie es deaktiviert für ein statisches Board.

Layout

BoardID identifiziert das Board; Height begrenzt den Scrollbereich; HTML gibt das Board samt seines scoped CSS zurück.

Ressourcen

Weiter entdecken

	Alle sgcHTML-KomponentenDurchsuchen Sie die vollständige Funktionsmatrix von über 60 Komponenten.	Öffnen
	Kostenlose Testversion herunterladenDie 30-Tage-Testversion enthält die 60.HTML-Demoprojekte.	Öffnen
	PreiseSingle-, Team- und Site-Lizenzen mit vollständigem Quellcode.	Öffnen

KanbanBoard