In sintesi

TsgcHTMLComponent_KanbanBoard

Aggiungi le colonne, inserisci le schede in ciascuna (oppure collega un dataset raggruppato per stato), abilita facoltativamente il trascinamento, quindi leggi la proprietà HTML.

Classe del componente

TsgcHTMLComponent_KanbanBoard

Renderizza

Bootstrap 5 board + scoped CSS (optional SortableJS)

Famiglia

Dati e Tabelle

Linguaggi

Delphi, C++ Builder, .NET

QuickStart

Aggiungi le colonne, aggiungi le schede, renderizzalo

Chiama AddColumn per ogni corsia, inserisci le schede con l’AddCard della colonna, abilita DragEnabled se desideri il riordino, quindi leggi 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

Riferimento

Proprietà e metodi principali

I membri che utilizzerai più spesso.

Colonne

Columns contiene le corsie, ciascuna con un Title, un Color enum, un ColumnID e una collezione Cards.

Aggiungere colonne

AddColumn(aTitle, aColor) aggiunge una corsia e restituisce il TsgcHTMLKanbanColumn così puoi continuare ad aggiungervi schede.

Schede

L’AddCard(aTitle, aDescription, aColor, aAssignee, aTag, aTagColor) di una colonna aggiunge una scheda con descrizione, assegnatario e badge tag colorato opzionali.

Binding ai dataset

LoadFromDataSet(aDataSet, aGroupField, aTitleField, aDescField, aAssigneeField) costruisce una colonna per ogni valore di gruppo distinto e una scheda per riga.

Drag-and-drop

DragEnabled inietta SortableJS così le schede possono essere trascinate tra le colonne; lascialo disattivato per una board statica.

Layout

BoardID identifica la board; Height limita l’area di scorrimento; HTML restituisce la board più il suo CSS dedicato.

Risorse

Continua a esplorare

	Tutti i componenti sgcHTMLEsplora la matrice completa delle funzionalità di oltre 60 componenti.	Apri
	Scarica la Prova GratuitaLa prova di 30 giorni include i progetti demo 60.HTML.	Apri
	PrezziLicenze Single, Team e Site con codice sorgente completo.	Apri

KanbanBoard