At a glance

TsgcHTMLComponent_TreeGrid

Define the columns, add nodes (or bind a self-referencing dataset by Id / ParentId), then read the HTML property.

Component class

TsgcHTMLComponent_TreeGrid

Renders

Bootstrap 5 table + scoped CSS + toggle script

Family

Data & Tables

Languages

Delphi, C++ Builder, .NET

QuickStart

Add columns, add nodes, render it

Add a TsgcHTMLTreeGridColumn per visible field, push rows with AddNode, then read HTML. Every node's Id / ParentId builds the hierarchy.

uses
  sgcHTML_Component_TreeGrid;

var
  oTreeGrid: TsgcHTMLComponent_TreeGrid;
  oColumn: TsgcHTMLTreeGridColumn;
begin
  oTreeGrid := TsgcHTMLComponent_TreeGrid.Create(nil);
  try
    oTreeGrid.TreeGridID := 'orgchart';
    oTreeGrid.Sortable := True;

    oColumn := oTreeGrid.Columns.Add;
    oColumn.Caption := 'Department';
    oColumn.FieldName := 'Name';

    oColumn := oTreeGrid.Columns.Add;
    oColumn.Caption := 'Headcount';
    oColumn.FieldName := 'Headcount';
    oColumn.Align := tgaRight;

    oTreeGrid.AddNode('eng', '', ['Engineering', '42']);
    oTreeGrid.AddNode('eng-be', 'eng', ['Backend', '18']);
    oTreeGrid.AddNode('eng-fe', 'eng', ['Frontend', '15']);

    WebModule.Response := oTreeGrid.HTML;   // hierarchical table + scoped CSS + toggle script
  finally
    oTreeGrid.Free;
  end;
end;

// Or bind it straight to a self-referencing dataset (Id / ParentId columns):
oTreeGrid.LoadFromDataSet(qryDepartments, 'Id', 'ParentId');

// includes: sgcHTML_Component_TreeGrid.hpp

TsgcHTMLComponent_TreeGrid *oTreeGrid = new TsgcHTMLComponent_TreeGrid(NULL);
try
{
  oTreeGrid->TreeGridID = "orgchart";
  oTreeGrid->Sortable = true;

  TsgcHTMLTreeGridColumn *oColumn = oTreeGrid->Columns->Add();
  oColumn->Caption = "Department";
  oColumn->FieldName = "Name";

  oColumn = oTreeGrid->Columns->Add();
  oColumn->Caption = "Headcount";
  oColumn->FieldName = "Headcount";
  oColumn->Align = tgaRight;

  oTreeGrid->AddNode("eng", "", OPENARRAY(UnicodeString, ("Engineering", "42")));
  oTreeGrid->AddNode("eng-be", "eng", OPENARRAY(UnicodeString, ("Backend", "18")));

  String html = oTreeGrid->HTML;   // hierarchical table + scoped CSS + toggle script
}
__finally
{
  delete oTreeGrid;
}

using esegece.sgcWebSockets;

var treeGrid = new TsgcHTMLComponent_TreeGrid();
treeGrid.TreeGridID = "orgchart";
treeGrid.Sortable = true;

var column = treeGrid.Columns.Add();
column.Caption = "Department";
column.FieldName = "Name";

column = treeGrid.Columns.Add();
column.Caption = "Headcount";
column.FieldName = "Headcount";
column.Align = TsgcHTMLTreeGridAlign.tgaRight;

treeGrid.AddNode("eng", "", new[] { "Engineering", "42" });
treeGrid.AddNode("eng-be", "eng", new[] { "Backend", "18" });

string html = treeGrid.HTML;   // hierarchical table + scoped CSS + toggle script

Reference

Key properties & methods

The members you reach for most often.

Columns

Columns holds the visible fields; each has a Caption, FieldName, Width, enum Align and Visible.

Adding rows

AddNode(aId, aParentId, aValues) appends a row; Id / ParentId define the hierarchy, aValues holds one string per column.

Dataset binding

LoadFromDataSet(aDataSet, aIdField, aParentIdField) walks a self-referencing recordset into the tree, auto-creating one column per remaining field when Columns is empty.

Expand / collapse

ExpandedByDefault, a node's own Expanded, IndentPixels, ExpandedIcon and CollapsedIcon drive the collapsible client-side toggle.

Sorting

Sortable and SortColumn sort sibling rows within each parent, locale-independently, by the chosen column.

Table styling

Striped, Bordered, Hover and ShowRowLines style the Bootstrap table; HTML returns the table plus its toggle script.

Resources

Keep exploring

	Online HelpFull API reference and usage guide for this component.	Open
	All sgcHTML ComponentsBrowse the full feature matrix of 80+ components.	Open
	Download Free TrialThe 30-day trial ships the 60.HTML demo projects.	Open
	PricingSingle, Team and Site licenses with full source code.	Open

TreeGrid