Jump to content

UnidbGrid : Same Cell containing image + FieldText


Abaksoft

Recommended Posts

Hello Friends, Hoping you feel good.

I did'nt find same topic on the forum.

So, I would like to display an UnidbGrid, where we can get, on the same cell  :  one Image (On Top)  and  Field Text  (on  Bottom) as showed in attachment picture.

I tried t get it from the Demo :  C:\Program Files (x86)\FMSoft\Framework\uniGUI\Demos\Desktop\GridImages   

but I could'nt :(

(This is the same on ecommerce website, where you display an article image with its name on bottom).

Has anyone get it ?

Thx.

 

procedure TMainForm.UniDBGrid1FieldImage(const Column: TUniDBGridColumn;
  const AField: TField; var OutImage: TGraphic; var DoNotDispose: Boolean;
  var ATransparent: TUniTransparentOption);
begin
  if SameText(AField.FieldName, 'Name2') then
  begin
    OutImage := TBitmap.Create;
    with (OutImage as TBitmap) do
    begin
      SetSize(128, 32);
      Canvas.Font.Size := 12;
      Canvas.Font.Color := clBlue;
      Canvas.Font.Style := [fsBold,  fsItalic];
      Canvas.Brush.Style := bsBDiagonal;
      Canvas.Brush.Color := clGreen;
      Canvas.Rectangle(1, 1, 127, 31);
      Canvas.TextOut(2, 2, AField.DisplayText);
    end;
  end
  else if SameText(AField.FieldName, 'gender') then
  begin
    DoNotDispose := True; // we provide an static image so do not free it.
    if AField.AsString = 'male' then
      OutImage := UniImage1.Picture.Graphic
    else if AField.AsString = 'female' then
      OutImage := UniImage2.Picture.Graphic;
  end;
end;

 

dbgrid_Text_Image_On1Cell.png

Link to comment
Share on other sites

Hi,

An alternative is to use the field's OnGetText event using CSS classes, for example:

procedure TMainForm.FDMemTable1IMAGEGetText(Sender: TField; var Text: string;
  DisplayText: Boolean);
begin
  if DisplayText then
   Text:= Sender.AsString + '<h4>' + FDMemTable1ID.Text + '</h4>';
end;

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  FDMemTable1.Open;
  // Use Font Awesome
  FDMemTable1.AppendRecord([1, '<i class="fas fa-frown-o fa-4x" style=color:red></i>']);
  FDMemTable1.AppendRecord([2, '<i class="fas fa-meh fa-4x" style=color:orange></i>']);
  FDMemTable1.AppendRecord([3, '<i class="fas fa-smile fa-4x" style=color:green></i>']);
end;

image.png.39774703058c40aa02b12fd9e24cdc14.png 

This example used font awesome, but you can use images, etc.

Best Regards,

Eduardo Belo

 

 

UniGUIDBGridImageCSS.rar

  • Upvote 1
Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...