TWebTableControl building efficiency

WEB TMS WEB Core
1

Hi,

Below simple example which adding 15000 rows to TWebTableControl.
It takes about 25 seconds. Is it possible to do this faster?

procedure TForm1.WebButton1Click(Sender: TObject);
var i:Integer;
begin
  Self.WebTableControl1.RowCount:=15000+1;
  for i:= 0 to 15000 do
    begin
      WebTableControl1.Cells[0,i]:=i.ToString;
      WebTableControl1.Cells[1,i]:=i.ToString;
      WebTableControl1.Cells[2,i]:=i.ToString;
      WebTableControl1.Cells[3,i]:=i.ToString;
      WebTableControl1.Cells[4,i]:=i.ToString;
      WebTableControl1.Cells[5,i]:=i.ToString;
      WebTableControl1.Cells[6,i]:=i.ToString;
      WebTableControl1.Cells[7,i]:=i.ToString;
      WebTableControl1.Cells[8,i]:=i.ToString;
      WebTableControl1.Cells[9,i]:=i.ToString;
      WebTableControl1.Cells[10,i]:=i.ToString;

    end;
end;
2

Take in account that a TWebTableControl is built-up from a HTML TABLE element and that accessing 15000 * 10 = 150000 TD HTML Elements in 15000 TR elements takes it time.
If you have many cells, a component like TTMSFNCGrid can be considered as this only paints visible cells and won't have so many DOM manipulations.
We'll look if we can further fine-tune the TWebTableControl performance, but given its architecture, it is unclear if this can be significantly speed up.

3

Ok thx for the answer.

  1. I found some faster method ... when I increase RowCount inside the loop (like example code below) the table building process is faster around 5 seconds, I don't know why ... I think that good idea will be look into code to increase performance for TWebTableControl by TMS Support.
procedure TForm1.WebButton1Click(Sender: TObject);
var i:Integer;
begin
  for i:= 0 to 15000 do
    begin
      **WebTableControl1.RowCount:=2+i;**
      WebTableControl1.Cells[0,i]:=i.ToString;
      WebTableControl1.Cells[1,i]:=i.ToString;
      WebTableControl1.Cells[2,i]:=i.ToString;
      WebTableControl1.Cells[3,i]:=i.ToString;
      WebTableControl1.Cells[4,i]:=i.ToString;
      WebTableControl1.Cells[5,i]:=i.ToString;
      WebTableControl1.Cells[6,i]:=i.ToString;
      WebTableControl1.Cells[7,i]:=i.ToString;
      WebTableControl1.Cells[8,i]:=i.ToString;
      WebTableControl1.Cells[9,i]:=i.ToString;
      WebTableControl1.Cells[10,i]:=i.ToString;

    end;
end;

  1. The problem is that I have WebCore Appication based on Bootstrap and I haven't possibility to use the FNC Control with my HTML template (insert object to template by ID).

  2. I use datatables plugin for TWebTableControl, thanks to this I have pagging, searching and sorting features, but before using datatables I have to finish table building (which takes long time with thousands rows).

I use datatables in this way where the TWebTableControl (#mytablefromWebCore).

asm
if ( ! $.fn.DataTable.isDataTable( '#mytablefromWebCore' ) ) {
      $('#mytablefromWebCore').dataTable( {
        "searching": true,
        "ordering":  true,
        "responsive": true,
        "pagingType": "simple_numbers",
        "pageLength": 4

        and some different options for datatables

      });

    }
end;

and after that I have beautiful table with all needed features without so many DOM manipulations because I see only e.g. 5 rows on page.

1 Like