displaying images in WebGridPanel

WEB TMS WEB Core
1

I am coding a popup form that can display a variable number of thumbnail images. After looking at your demos and searching your support forum, I decided to implement it using a WebGridPanel.

I dropped a WebGridPanel on the form, sized it appropriately and added the right number of columns and rows. For the size images I want to display, I ended setting the Grid to a size of 820 x 560 with 7 columns X 4 rows making a grid that can display up to 28 images. Then using this code it worked perfectly:
var
img: TWebImageControl;
cc: TControlCollectionItem;
I: Integer;
begin
numImages := 23;
WebGridPanel1.BeginUpdate;
WebGridPanel1.ControlCollection.Clear;

for I := 1 to numImages do
begin
img := TWebImageControl.Create(Self);
img.Parent := WebGridPanel1;
img.URL := 'img/' + IntToStr(I mod 12 + 1) + '_128.jpg';
img.Width := 106;
img.Height := 135;
cc := WebGridPanel1.ControlCollection.Add;
cc.Control := img;
cc.Column := 0;
cc.Row := 0;
end;

WebGridPanel1.EndUpdate;

But I need to display anywhere from 3 images up to 50 images in the form. I would like to create the WebGridPanel dynamically at runtime then load the images. Is that the right solution and how do I go about doing that?

Thanks in advance for your help,
Elias

2

You can create a TWebGridPanel at runtime just like you can create any other control at runtime.
This sample code shows a complete runtime setup of TWebGridPanel and its child controls.

type
  TForm1 = class(TWebForm)
  private
    { Private declarations }
  public
    { Public declarations }
    gp: TWebGridPanel;
  end;

var
  btn: TWebButton;
begin
  gp := TWebGridPanel.Create(Self);
  gp.Parent := Self;
  gp.Width := 400;
  gp.Height := 200;

  gp.BeginUpdate;

  gp.ColumnCollection.Clear;
  gp.ColumnCollection.Add;
  gp.ColumnCollection.Add;

  gp.ColumnCollection.Items[0].SizeStyle := ssAbsolute;
  gp.ColumnCollection.Items[0].Value := 200;

  gp.ColumnCollection.Items[1].SizeStyle := ssAbsolute;
  gp.ColumnCollection.Items[1].Value := 200;

  gp.RowCollection.Clear;

  gp.RowCollection.Add;
  gp.RowCollection.Add;

  gp.RowCollection.Items[0].SizeStyle := ssAbsolute;
  gp.RowCollection.Items[0].Value := 100;

  gp.RowCollection.Items[1].SizeStyle := ssAbsolute;
  gp.RowCollection.Items[1].Value := 100;

  btn := TWebButton.Create(Self);
  gp.AddControl(btn);
  btn.Caption := 'btn 0';

  btn := TWebButton.Create(Self);
  gp.AddControl(btn);
  btn.Caption := 'btn 1';

  btn := TWebButton.Create(Self);
  gp.AddControl(btn);
  btn.Caption := 'btn 2';

  btn := TWebButton.Create(Self);
  gp.AddControl(btn);
  btn.Caption := 'btn 3';

  gp.EndUpdate;
end;
3

Bruno,

Thank you very much! That worked well.

I was able to create the WebGridPanel dynamically and load the images into it.

If I would like to add couple of WebLabels to each image. My guess is that I would need to create separate cells for those and add the labels in there. Is there a way to access the cells specifically with a row, col reference? Can the grid.ControlCollection.Column and grid.ControlCollection.Row properties be used for that?

Thanks again for all your help,

Elias

4

There is not a direct way to access webgridpanel.ControlCollection by column/row.
webgridpanel.ControlCollection is a one-dimensional collection of control items.

You can retrieve the column & row and the control from this linear collection with:

webgridpanel.ControlCollection.Items[x].Column: integer;
webgridpanel.ControlCollection.Items[x].Row: integer;
webgridpanel.ControlCollection.Items[x].Control: TControl

The linear index based on column,row is:

index = column + row * webgridpanel.ColumnCollection.Count