Image And Text in Cell (Variant 2, using CellManager)

This section demonstrates the capabilities of displaying an image and text in a grid cell using a custom cell manager, TDataAxisImageTextCellManagerEh.

SolutionFrame.ImageAndTextInCell.pas

unit SolutionFrame.ImageAndTextInCell2;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  FMX.Types, FMX.Graphics, FMX.Controls, FMX.Forms, FMX.Dialogs, FMX.StdCtrls,
  EhLibFmx.Api, System.Rtti, EhLibUtils, DBUtilsEh,
  EhLibFmx.DataGrids, EhLibFmx.DataAxisGrid.FieldBars, EhLibFmx.DataGrid.Columns, EhLibFmx.ToolControls,
  CustomCells.ImageAndTextEdit, EhLibFmx.Grids, EhLibFmx.DataAxisGrids, EhLibFmx.CustomDataGrids,
  FMX.Controls.Presentation, EhLibFmx.CustomDataVertGrids,
  EhLibFmx.DataVertGrids, FMX.Layouts, EhLibFmx.DataVertGrid.Rows;

type
  TfrImageAndTextInCell2 = class(TFrame)
    Panel1: TPanel;
    Button1: TButton;
    Layout1: TLayout;
    DataGridEh1: TDataGridEh;
    DataGridEh1OrderNoColumn1: TDataGridStringColumnEh;
    DataGridEh1CustNoColumn1: TDataGridStringColumnEh;
    DataGridEh1PaymentMethodColumn1: TDataGridStringColumnEh;
    DataGridStringColumnEh1: TDataGridStringColumnEh;
    DataVertGridEh1: TDataVertGridEh;
    Splitter1: TSplitter;
    DataVertGridEh1OrderNoRow1: TDataVertGridStringRowEh;
    DataVertGridEh1CustNoRow1: TDataVertGridStringRowEh;
    DataVertGridEh1PaymentMethodRow1: TDataVertGridStringRowEh;
    DataVertGridStringRowEh1: TDataVertGridStringRowEh;
    procedure DataGridStringColumnEh1GetDataCellManager(Sender: TObject;
      Params: TDataGridGetDataCellManagerParamsEh);
    procedure Button1Click(Sender: TObject);
    procedure DataVertGridStringRowEh1GetDataCellManager(Sender: TObject;
      Params: TDataVertGridGetDataCellManagerParamsEh);
  private
    { Private declarations }
  public
    ImageTextCellMan: TDataAxisImageTextCellManagerEh;

    procedure InitImageTextCellContent(Sender: TObject; Params: TDataAxisInitCellContentParamsEh);
    constructor Create(AOwner: TComponent); override;
  end;

implementation

uses DataModuleUnit;

{$R *.fmx}

procedure TfrImageAndTextInCell2.Button1Click(Sender: TObject);
begin
  DataGridEh1PaymentMethodColumn1.Title.FilterItem.SetExpression(
    TSTFilterOperatorEh.foNotEqual, 'Credit',
    TSTFilterOperatorEh.foNon,
    TSTFilterOperatorEh.foNon, TValue.Empty);
  DataGridEh1.Title.Filter.ApplyFilter();
end;

constructor TfrImageAndTextInCell2.Create(AOwner: TComponent);
begin
  inherited Create(AOwner);

  ImageTextCellMan := TDataAxisImageTextCellManagerEh.Create(Self);
  ImageTextCellMan.OnInitCellContent := InitImageTextCellContent;

  Button1Click(nil);
  Panel1.Visible := False;
end;

procedure TfrImageAndTextInCell2.DataGridStringColumnEh1GetDataCellManager(Sender: TObject;
  Params: TDataGridGetDataCellManagerParamsEh);
begin
  Params.CellManager := ImageTextCellMan;
end;

procedure TfrImageAndTextInCell2.DataVertGridStringRowEh1GetDataCellManager(
  Sender: TObject; Params: TDataVertGridGetDataCellManagerParamsEh);
begin
  Params.CellManager := ImageTextCellMan;
end;

procedure TfrImageAndTextInCell2.InitImageTextCellContent(Sender: TObject;
  Params: TDataAxisInitCellContentParamsEh);
var
  ContValue: TValue;
  ImageIndex: Integer;
  InCellImage: TLaImageEh;
begin
  if Params.CellContent = nil then Exit;
  if Params.ListItemBar = nil then Exit;

  ContValue := Params.ListItemBar.SourceRowLink.FieldValue[DataGridEh1PaymentMethodColumn1.Field];

  InCellImage := (Params.Cell as TDataAxisImageTextCellEh).InCellImage;
  ImageIndex := DataModule1.GetImageIndexByPaymentMethod(ValueToString(ContValue));
  InCellImage.ImageIndex := ImageIndex;
  InCellImage.ImageList := DataModule1.imLstPaymentTypes;
  InCellImage.Margins.Right := 8;
end;

end.

procedure TfrImageAndTextInCell2.Button1Click(Sender: TObject);

Method sets a filter in the grid to display only those records for which there is an image in the DataModule1.imLstPaymentTypes image list.

constructor TfrImageAndTextInCell2.Create(AOwner: TComponent);

A frame constructor in which CellManagers are created to display images and text.

procedure TfrImageAndTextInCell2.InitImageTextCellContent(Sender: TObject; Params: TDataAxisInitCellContentParamsEh);

The ImageTextCellMan.OnInitCellContent event handler in which we assign the ImageList and image number depending on the contents of the PaymentMethod field.

class TDataAxisImageTextCellManagerEh

The implementation of the TDataAxisImageTextCellManagerEh class is located in the CustomCells.ImageAndTextEdit.pas project file.

CustomCells.ImageAndTextEdit.pas

unit CustomCells.ImageAndTextEdit;

interface

uses
  System.SysUtils, System.Types, System.UITypes, System.Classes, System.Variants,
  EhLibFmx.Api, EhLibRtl.Api,
  FMX.TextLayout,
  DataModuleUnit,
  FMX.Types, FMX.Controls, FMX.Forms, FMX.Graphics;

type

{ TDataAxisImageTextCellManagerEh }

  TDataAxisImageTextCellManagerEh = class(TDataAxisTextCellManagerEh)
  protected
    function CreateGridCell(ACellArea: TGridBaseCellAreaEh): TGridBaseCellEh; override;
  end;

{ TDataAxisImageTextCellEh }

  TDataAxisImageTextCellEh = class(TDataAxisTextCellEh)
  private
    FInCellImage: TLaImageEh;
  protected
    function CreateDefaultCellContentControls(AParentObject: TLaObjectEh): TLaObjectEh; override;
  public
    property InCellImage: TLaImageEh read FInCellImage;
  end;


implementation

function TDataAxisImageTextCellManagerEh.CreateGridCell(ACellArea: TGridBaseCellAreaEh): TGridBaseCellEh;
begin
  Result := TDataAxisImageTextCellEh.Create(ACellArea);
end;

{ TDataAxisImageTextCellEh }

function TDataAxisImageTextCellEh.CreateDefaultCellContentControls(AParentObject: TLaObjectEh): TLaObjectEh;
var
  BaseContent: TLaObjectEh;
begin
  with TLaGridPanelEh.CreateWith(AParentObject) do
  begin
    Result := RefSelf;
    Name := 'ImageTextContent';

    with ColumnCollection.Add do
    begin
      SizeStyle := TLaGridPanelSizeStyleEh.Auto;
      Value := -1;
    end;

    with ColumnCollection.Add do
    begin
      SizeStyle := TLaGridPanelSizeStyleEh.Weight;
      Value := 1;
    end;

    //Col1 Image
    with TLaImageEh.CreateWith(RefSelf, RefSelf) do
    begin
      ControlCollection.AddControl(RefSelf, 0, -1);
      Name := 'InCellImage';
      FInCellImage := RefSelf as TLaImageEh;
      Width := 24;
      Height := 24;
      VertAlignment := TLaVertAlignmentEh.Center;
      Margins.Rect := TRectF.Create(10, 0, 0, 0);
    end;

    //Col2 Text
    BaseContent := inherited CreateDefaultCellContentControls(RefSelf);
    ControlCollection.AddControl(BaseContent, 1, -1);
  end;

end;

end.

The implementation of the TDataAxisImageTextCellManagerEh class is very simple. In it, we override the CreateGridCell method, returning the created cell of type TDataAxisImageTextCellEh.

In the TDataAxisImageTextCellEh class, we also override one method, CreateDefaultCellContentControls, in which we create a TLaGridPanelEh panel and place two objects in it:

• TLaImageEh - an image object
• CreateDefaultCellContentControls - an object used as the content object in the TDataAxisTextCellEh base class. We don't create a separate TLaTextBlockEh because the base class object is more complex and can open a text editor.

As a result, the grid cells will look like this:

The full version of the demo frame, consisting of the SolutionFrame.ImageAndTextInCell.pas and SolutionFrame.ImageAndTextInCell.fmx files, can be found in the Demo project Demos\Fmx\EhLib.Fmx.MainDemo.dproj