In één oogopslag

TsgcHTMLComponent_KanbanBoard

Voeg kolommen toe, plaats kaarten in elke kolom (of koppel een dataset gegroepeerd op status), schakel optioneel slepen in en lees dan de HTML-eigenschap.

Componentklasse

TsgcHTMLComponent_KanbanBoard

Rendert

Bootstrap 5-board + scoped CSS (optioneel SortableJS)

Familie

Data en tabellen

Talen

Delphi, C++ Builder, .NET

QuickStart

Voeg kolommen toe, voeg kaarten toe, render het

Roep AddColumn aan voor elke baan, voeg kaarten toe met de AddCard van de kolom, schakel DragEnabled in als je wilt herordenen en lees dan 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

Referentie

Belangrijkste eigenschappen en methoden

De members die je het vaakst gebruikt.

Kolommen

Columns bevat de banen, elk met een Title, enum Color, ColumnID en een Cards-verzameling.

Kolommen toevoegen

AddColumn(aTitle, aColor) voegt een baan toe en retourneert de TsgcHTMLKanbanColumn zodat je er kaarten aan kunt blijven toevoegen.

Kaarten

De AddCard(aTitle, aDescription, aColor, aAssignee, aTag, aTagColor) van een kolom voegt een kaart toe met een optionele beschrijving, toegewezene en gekleurde tag-badge.

Datasetbinding

LoadFromDataSet(aDataSet, aGroupField, aTitleField, aDescField, aAssigneeField) bouwt één kolom per onderscheidende groepswaarde en een kaart per rij.

Sleep-en-neerzet

DragEnabled injecteert SortableJS zodat kaarten tussen kolommen kunnen worden gesleept; laat het uit voor een statisch board.

Layout

BoardID identificeert het board; Height begrenst het scrollgebied; HTML retourneert het board plus zijn scoped CSS.

Bronnen

Blijf ontdekken

	Alle sgcHTML-componentenBlader door de volledige functiematrix van 60+ componenten.	Openen
	Download gratis proefversieDe proefversie van 30 dagen bevat de 60.HTML-demoprojecten.	Openen
	PrijzenSingle-, Team- en Site-licenties met volledige broncode.	Openen

KanbanBoard