En bref

TsgcHTMLComponent_KanbanBoard

Ajoutez des colonnes, déposez des cartes dans chacune (ou liez un jeu de données groupé par statut), activez éventuellement le glisser, puis lisez la propriété HTML.

Classe du composant

TsgcHTMLComponent_KanbanBoard

Produit

Un tableau Bootstrap 5 + CSS dédié (SortableJS optionnel)

Famille

Données & Tableaux

Langages

Delphi, C++ Builder, .NET

QuickStart

Ajoutez des colonnes, ajoutez des cartes, affichez-le

Appelez AddColumn pour chaque voie, ajoutez des cartes avec l'AddCard de la colonne, activez DragEnabled si vous souhaitez réorganiser, puis lisez 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

Référence

Propriétés & méthodes clés

Les membres que vous utilisez le plus souvent.

Colonnes

Columns contient les voies, chacune avec un Title, une énumération Color, un ColumnID et une collection Cards.

Ajout de colonnes

AddColumn(aTitle, aColor) ajoute une voie et renvoie la TsgcHTMLKanbanColumn pour que vous puissiez continuer à y ajouter des cartes.

Cartes

L'AddCard(aTitle, aDescription, aColor, aAssignee, aTag, aTagColor) d'une colonne ajoute une carte avec une description, un responsable et un badge d'étiquette coloré optionnels.

Liaison de jeu de données

LoadFromDataSet(aDataSet, aGroupField, aTitleField, aDescField, aAssigneeField) construit une colonne par valeur de groupe distincte et une carte par ligne.

Glisser-déposer

DragEnabled injecte SortableJS pour que les cartes puissent être glissées entre les colonnes ; désactivez-le pour un tableau statique.

Mise en page

BoardID identifie le tableau ; Height plafonne la zone de défilement ; HTML renvoie le tableau plus son CSS dédié.

Ressources

Continuez l'exploration

	Tous les composants sgcHTMLParcourez la matrice complète des fonctionnalités de plus de 60 composants.	Ouvrir
	Télécharger la version d'essai gratuiteLa version d'essai de 30 jours fournit les projets de démonstration 60.HTML.	Ouvrir
	TarifsLicences Single, Team et Site avec code source complet.	Ouvrir

KanbanBoard