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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...