TreeGrid
TsgcHTMLComponent_TreeGrid — render a Bootstrap table with collapsible, hierarchical rows built from Id / ParentId pairs, in Delphi, C++ Builder and .NET.
TsgcHTMLComponent_TreeGrid — render a Bootstrap table with collapsible, hierarchical rows built from Id / ParentId pairs, in Delphi, C++ Builder and .NET.
Define the columns, add nodes (or bind a self-referencing dataset by Id / ParentId), then read the HTML property.
TsgcHTMLComponent_TreeGrid
Bootstrap 5 table + scoped CSS + toggle script
Delphi, C++ Builder, .NET
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 scriptThe members you reach for most often.
Columns holds the visible fields; each has a Caption, FieldName, Width, enum Align and Visible.
AddNode(aId, aParentId, aValues) appends a row; Id / ParentId define the hierarchy, aValues holds one string per column.
LoadFromDataSet(aDataSet, aIdField, aParentIdField) walks a self-referencing recordset into the tree, auto-creating one column per remaining field when Columns is empty.
ExpandedByDefault, a node's own Expanded, IndentPixels, ExpandedIcon and CollapsedIcon drive the collapsible client-side toggle.
Sortable and SortColumn sort sibling rows within each parent, locale-independently, by the chosen column.
Striped, Bordered, Hover and ShowRowLines style the Bootstrap table; HTML returns the table plus its toggle script.
| 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 |