GT Delphi Components – Freeware Components

Posts Tagged ‘inplace editor’

Extending the tutorial How to add a built – in editor to a TListBox i’ve made the listbox in that demo
a component with an embedded inplace editor with some extra features.

TgtListBox Demo

Here is the source code of the component

{*******************************************************}
{                                                       }
{       GT Delphi Components                            }
{       TgtListBox                                      }
{                                                       }
{       Copyright (c) GT Delphi Components              }
{       http://www.gtdelphicomponents.gr                }
{                                                       }
{                                                       }
{*******************************************************}

unit o_GTListBox;

interface
uses
   Classes
  ,StdCtrls
  ,Graphics
  ;
type
{------------------------------------------------------------------------------}
  TgtListBox = class(TListBox)
  private
    FEditorEnabled: Boolean;
    FEditorColor: TColor;
    FEditorFontColor: TColor;
    { Private declarations }
  protected
    { Protected declarations }
    FInplaceEdit : TEdit;
    procedure KeyDown(var Key: Word; Shift: TShiftState);override;
    procedure InternalOnEditorKeyDown(Sender: TObject; var Key: Word; Shift: TShiftState);
  public
    { Public declarations }
    constructor Create(AOwner:TComponent);override;
    destructor  Destroy;override;
  published
    { Published declarations}
    property EditorColor      : TColor  read FEditorColor     write FEditorColor;
    property EditorFontColor  : TColor  read FEditorFontColor write FEditorFontColor;
    property EditorEnabled    : Boolean read FEditorEnabled   write FEditorEnabled;
  end;
{------------------------------------------------------------------------------}

implementation

{ TgtListBox }
{------------------------------------------------------------------------------}
constructor TgtListBox.Create(AOwner: TComponent);
begin
  inherited Create(AOwner);
  FEditorEnabled   := False;
  EditorColor      := Color;
  FEditorFontColor := Font.Color;
  Style            := lbOwnerDrawFixed;
  ItemHeight       := 21;
end;
{------------------------------------------------------------------------------}
destructor TgtListBox.Destroy;
begin
  inherited;
end;
{------------------------------------------------------------------------------}
procedure TgtListBox.KeyDown(var Key: Word; Shift: TShiftState);
begin
  if FEditorEnabled then
    if (Items.Count > 0) and (ItemIndex >=0) and (Key = 13) then //the enter key
    begin
      if not Assigned(FInplaceEdit) then
      begin
        FInplaceEdit            := TEdit.Create(Self);
        FInplaceEdit.OnKeyDown  := InternalOnEditorKeyDown;
      end;

      FInplaceEdit.Parent     := Self;
      FInplaceEdit.Color      := FEditorColor;
      FInplaceEdit.Font.Color := FEditorFontColor;
      FInplaceEdit.BoundsRect := ItemRect(ItemIndex);

      FInplaceEdit.Visible    := True;
      FInplaceEdit.Text       := Items[ItemIndex];
      FInplaceEdit.SetFocus;
    end;
  inherited KeyDown(Key,Shift);
end;
{------------------------------------------------------------------------------}
procedure TgtListBox.InternalOnEditorKeyDown(Sender: TObject; var Key: Word; Shift: TShiftState);
begin
  if (Items.Count > 0) and (ItemIndex >=0) and (Key = 13) then //the enter key
  begin
    Items[ItemIndex] := TEdit(Sender).Text;
    TEdit(Sender).Visible := False;
    SetFocus;
    ItemIndex        := ItemIndex;
  end;
end;
{------------------------------------------------------------------------------}
end.

Download the source code

When using a TListBox and when a user can or must modify an item of the list usually you must add another TEdit control to get the value of the selected item and after the user has set the value he wants you have to update the item by code.
Well here is a solution for you to implement an editor that appears on the item you want to edit and let’s you edit the item and by pressing enter you can save the value of the item.

ListBox Inplace Editor Demo

Of course all this code can be embeded into a TListBox descentant but for now this example will do…

Set the ListBox Style property to lbOwnerDrawFixed and set the ItemHeight to 21

Here is the source code :

{*******************************************************}
{                                                       }
{       GT Delphi Components                            }
{       ListBox Inplace Editor Demo                     }
{                                                       }
{       Copyright (c) GT Delphi Components              }
{       http://www.gtdelphicomponents.gr                }
{                                                       }
{                                                       }
{*******************************************************}

unit Unit1;

interface

uses
  Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,
  Dialogs, StdCtrls;

type
  TForm1 = class(TForm)
    ListBox1: TListBox;
    Button1: TButton;
    chkBoxAllowEdit: TCheckBox;
    procedure ListBox1Click(Sender: TObject);
    procedure Button1Click(Sender: TObject);
  private
    { Private declarations }
  protected
    FListBoxEditor : TEdit;
    procedure DisplayEditor(AListBox : TListBox);
    procedure InternalOnExit(Sender : TObject);
    procedure InternalOnKeyPress(Sender : TObject;var Key: Char);
  public
    { Public declarations }
  end;

var
  Form1: TForm1;

implementation

{$R *.dfm}
{-----------------------------------------------------------------------------}
procedure TForm1.ListBox1Click(Sender: TObject);
begin
  //If we allow editing
  if chkBoxAllowEdit.Checked then
  begin
    DisplayEditor(TListBox(Sender));
  end;
end;
{-----------------------------------------------------------------------------}
procedure TForm1.DisplayEditor(AListBox: TListBox);
begin
  //Checking if really an item is selected
  if AListBox.ItemIndex >=0 then
  begin
    //If the editor is not created we are creating it for the first time
    if not Assigned(FListBoxEditor) then
    begin
      FListBoxEditor            := TEdit.Create(Self);
      FListBoxEditor.Parent     := AListBox;
      FListBoxEditor.OnExit     := InternalOnExit;
      FListBoxEditor.OnKeyPress := InternalOnKeyPress;
    end;
    //Setting The Color
    FListBoxEditor.Color      := clSkyBlue;
    //This is crusial it places the editor exactly at the selected item
    FListBoxEditor.BoundsRect := AListBox.ItemRect(AListBox.ItemIndex);
    //Get the text of the item
    FListBoxEditor.Text       := AListBox.Items[AListBox.ItemIndex];
    //Show the editor;
    FListBoxEditor.Visible    := True;
  end;
end;
{-----------------------------------------------------------------------------}
procedure TForm1.InternalOnExit(Sender: TObject);
begin
  //TEdit(Sender).Visible := False;
end;
{-----------------------------------------------------------------------------}
procedure TForm1.InternalOnKeyPress(Sender: TObject; var Key: Char);
begin
  //if the Enter key is pressed
  if key = #13 then
  begin
    //Set the new text for the selected item
    ListBox1.Items[ListBox1.ItemIndex] := TEdit(Sender).Text;
    //hide the editor
    TEdit(Sender).Visible := False;
    //Set focus to the listbox
    ListBox1.SetFocus;
    ListBox1.ItemIndex :=ListBox1.ItemIndex;
    chkBoxAllowEdit.Checked := False;
  end;
end;
{-----------------------------------------------------------------------------}
procedure TForm1.Button1Click(Sender: TObject);
begin
  Close;
end;
{-----------------------------------------------------------------------------}

end.