Jump to content

Recommended Posts

  • Moderators

the simplest of grids, based on the html <table> element

Capture.PNG

usage

  var W3TableElement1 : TW3TableElement := TW3TableElement.Create(W3Panel1);

//add 4 columns to the grid
  W3TableElement1.AddColumn('Name',200);      //title, width
  W3TableElement1.AddColumn('Description',200);
  W3TableElement1.AddColumn('Type',150);
  W3TableElement1.AddColumn('Status',50);

  for var i := 0 to 2 do begin
    W3TableElement1.AddCell(i+1,1,'Name-'+inttostr(i));      //row,column,text
    W3TableElement1.AddCell(i+1,2,'Desc-'+inttostr(i));
    W3TableElement1.AddCell(i+1,3,'Type-'+inttostr(i));
    W3TableElement1.AddCell(i+1,4,'Stat-'+inttostr(i));
  end;

  W3Panel1.NativeScrolling := true;

 

component

unit HTMLTableElement;

interface

uses
  SmartCL.System, System.Types, SmartCL.Components;

type
  TW3TableElement = class(TW3CustomControl)
  protected
    function  MakeElementTagObj : THandle; override;
    TableRow    : Variant;
  public
    procedure AddColumn(title: string; colwidth: integer);
    procedure AddCell(row, column: integer; cell: String);
    ColumnCount : integer := 0;
    RowCount    : integer := 0;
  end;

implementation


{ TW3TableElement }

function TW3TableElement.MakeElementTagObj : THandle;
begin
  Result := w3_createHtmlElement('table');
end;

procedure TW3TableElement.AddColumn(title: string; colwidth: integer);
begin
//
  Inc(ColumnCount);

//when inserting the first column, do a rowInsert for the column titles
  If ColumnCount = 1 then begin
    TableRow := handle.insertRow(0);
    Inc(RowCount);
  end;

  // Insert a cell in the row at index [column]
  var newCell = TableRow.insertCell(columnCount-1);
  newCell.setAttribute('bgColor','lightgrey');
  newCell.setAttribute('width',inttostr(colwidth)+'px');

  // Append a text node to the cell
  var newText = browserapi.document.createTextNode(title);
  newCell.appendChild(newText);

end;

procedure TW3TableElement.AddCell(row, column: integer; cell: String);
begin
//
//when inserting the first cell in a row, do a rowInsert
  If Column = 1 then begin
    TableRow := handle.insertRow(RowCount);
    Inc(RowCount);
  end;

  // Insert a cell in the row at index [column]
  var newCell = TableRow.insertCell(column-1);

  // Append a text node to the cell
  var newText = browserapi.document.createTextNode(cell);
  newCell.appendChild(newText);

end;

end.

 

note this is an upgraded unit as referred to in this post - method 1

 

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...