TWebDBGrid and AddButton

WEB TMS WEB Core
1

Is the AddButton method supposed to work with a TWebDBGrid too?
I can add the call (howevere gets underlined red), but seems to do nothing.
I understand that both row and column must exist.
Maybe it is a matter of timing? Now I use the AfterPost event of the dataset to add the button.

2

Do you call this after all dataset records were loaded in grid rows?

3

Not sure about that. I add a record to the dataset and use the AfterPost to add the button. The record shows up in the grid, but the button doesn´t.

4

I investigated this with a small sample (see attached).
It seems, as if all buttons are erased when a record is inserted in the underlying dataset.
I can add buttons for all rows of the grid by hand, but once I INSERT a row, they all are gone.

What is the best practice here?

tx Bernd
DBGrid.zip (7.1 KB)

5

BTW: There is arendering issue. Given the sample from above, generate about 15 records. If you the recreate all the buttons you can see, that the very first column is out of sync and its cells slightly less high then those of the other rows.

6

Any progress on the buttons or the rendering issue?

7

It's on my todolist. I was out of office last week, catching up now and working through all open items.

8

Here is a project that shows how this is best dealt with this requirement.
Project1.zip (7.2 KB)

9

Wouldn´t this work, too?

procedure TForm1.WebDBGridGetCellChildren(Sender: TObject; ACol, ARow: Integer;
  AField: TField; AValue: string; AElement: TJSHTMLElementRecord);
begin
  if (ACol = 2) and (ARow > 0) then
  begin
  WebDBGrid.AddButton(ACol, ARow,'Delete');
  end;
end;
10

That is indeed also a possible approach.

11

Just a reminder: BTW: There is arendering issue. Given the sample from above, generate about 15 records. If you the recreate all the buttons you can see, that the very first column is out of sync and its cells slightly less high then those of the other rows.

12
  1. I gave a solution implemented in the project. Why aren't you using the solution offered
  2. I retested using your project again and I see
    image
    image907×824 37.7 KB

    so, it is unclear what you are hinting at here.
13

I have seen, that your solution works, thank´s for that.
I wanted to hint at the fact, that this:
for I := 1 to WebClientDataSet.RecordCount do
begin
WebDBGrid.AddButton(3,i,'BUY');
end;
leads to a rendering glitch, although this should be a valid go, isn´t it?

14

I cannot see a rendering glitch.
What glitch do you see? What's different from the screenshot sent?
Do you use TMS WEB Core v2.0.3.0?

15

Hello!

How do I make a CSS button, for example I can add a button to a form and set this

Caption := 'remove';
ElementClassName := 'btn btn-xxl btn-danger shadow';
ElementFont := efCSS;

and I get something like this:

image

How do I add a button like this to the grid?

16

Use WebDBGrid.OnGetCellChildren() event handler and set your button's ParentElement property to the cell element returned via AElement.element.

1 Like
17

It just managed to solve this, thank you!

I did it via this code:

procedure TfrmOdvoz.gridPodrobnoGetCellChildren(Sender: TObject; ACol, ARow: Integer; AField: TField; AValue: string; AElement: TJSHTMLElementRecord);
var el: TJSHTMLElement;
begin
  if (ACol = 1) and (ARow > 0) then begin
    el := TJSHTMLElement(document.createElement('INPUT'));
    el['type'] := 'BUTTON';
    el.addEventListener('click',@PlusClick);
    el.style.setProperty('height','70px');
    el.style.setProperty('width','70px');
    el['value'] := '+';
    el.innerHTML := '<i class="material-icons" style="font-size: 70px">add</i>'; // this is not workning :(
    el.className := 'btn btn-xxl btn-success';

    AElement.element.appendChild(el);
  end;
end;
1 Like