TClProSearchEdit

AddNewProSearchEdit(TComponent, xName, xCaption):TClProSearchEdit;

Search bar does not appear automatically in ProListView. It is a component created for this. This component also has the ability to search by scanning the barcode. Now let's see how it goes either way. Let's start with the definition.

searchEdt : TClProSearchEdit;

Let's add ProSearchEdit in MyForm.

searchEdt := MyForm.AddNewProSearchEdit(MyForm,'searchEdt','Search Something ...');
searchEdt.Align := alTop;
searchEdt.Margins.Top := 15;
searchEdt.Margins.Left := 15;
searchEdt.Margins.Right := 15;
searchEdt.Margins.Bottom := 10;
searchEdt.Height := 40;

The following screenshot is displayed with the above code.
Output:

Now, if we want to search by scanning the barcode in the search bar, we must write the following code in our searchEdt variable, then the barcode scanning button will appear on the screen.

searchEdt.clBarcodeReader := True;

Output:

Code:

Var   
MyForm:TclForm;
testListview : TClProListView;
searchEdt : TClProSearchEdit;

 procedure SetSearchEdit;
  begin
    searchEdt := MyForm.AddNewProSearchEdit(MyForm,'searchEdt','Search Something ...');
    searchEdt.Align := alTop;
    searchEdt.Margins.Top := 15;
    searchEdt.Margins.Left := 15;
    searchEdt.Margins.Right := 15;
    searchEdt.Margins.Bottom := 10;
    searchEdt.Height := 40;
    searchEdt.clBarcodeReader := True;
  end;

  procedure CreateListView;
  begin
    testListview := MyForm.AddNewProListView(MyForm,'testListview');
    clComponent.SetupComponent(testListview,'{"Height" : 150,"Align":"Client","MarginBottom":20,"MarginTop":20,"MarginRight":20,"MarginLeft":20, "ListType":"Cart","ItemColumnCount" : 2,"ItemHeight" : 150,"ItemWidth":150, 
    "BorderColor":"#098614", "BorderWidth":2,"RoundWidth":5, "RoundHeight":5}');
    testListview.ListType := 'horizontal';
    searchEdt.TargetListView := testListview;
  end;

begin
  MyForm := TclForm.Create(Self);
  SetSearchEdit;
  CreateListView;
  MyForm.Run;
end;