TWebTableControl issue

[Burton_Richard]

Hi,

I believe I've found an error with the TWebTableControl component.

const header=
  '<div class="row">'+
  	'<div class="col">'+
  		'<div>'+
  			'ID'+
  		'</div>'+
  	'</div>'+
  	'<div class="col">'+
  		'<div>'+
  			'BUTTON'+
  		'</div>'+
  	'</div>'+
  '</div>';

const templ=
  '<div class="row my-2">'+
    '<div class="col">'+
    	'<div>'+
    		'%s'+
    	'</div>'+
    '</div>'+
    '<div class="col">'+
    	'<div id="delbtn">'+
        '%s'+
    	'</div>'+
    '</div>'+
  '</div>';

{$R *.dfm}

procedure TForm1.MakeTemplate;
var 
  i:ShortInt;
begin
  WebTableControl1.Cells[0,0]:=header;

  for i:=1 to 9 do
    WebTableControl1.cells[0,i]:=format(templ,[inttostr(i),'<button id =delbtn'+inttostr(i)+'>TEST</button>']);
end;

procedure TForm1.MakeButtons;
var
  j:ShortInt;
  btn:TJSHTMLElement;

    procedure hello;
    begin
      ShowMessage('hello');
    end;

begin
  for j:=1 to 9 do
    begin
      btn:=TJSHTMLElement(document.getElementById('delbtn'+inttostr(j)));
      btn.addEventListener('click',@hello);
    end;
end;

procedure TForm1.Form1Create(Sender: TObject);
begin
  MakeTemplate;
  MakeButtons;
end;

In the above code, after the form has been created, the buttons should have an onclick event, but clicking them does not produce the desired behaviour.

However, if we deliberately make an error in MakeButtons and set the loop to

for j:=1 to 10 do

An exception is shown on screen but the buttons now have the desired onclick event.

Thanks!

[brunofierens]

When you set the WebTableControls.Cells as HTML string, this does not synchronously result in the HTML string to be in the DOM as HTML elements.
When you add after document.getElementById() the line:

console.log('add', btn,j);

you can see that btn does not exist yet.
To make this work, call MakeButtons from OnFormShow, then the DOM elements already exist and events can be bound to them.

[Burton_Richard]

Ah, my mistake.

Thanks, Bruno!