TClProListView

AddNewProListView(TComponent, xName):TClProListView;

Represents the list view component that you can use to hold and present various types of items. TclListView displays a collection of items in a list optimized for fast and smooth scrolling. Apart from the standard ListView parameter properties, it has features such as background and border color rendering. We can also design the appearance of the components in the ProListView ourselves. It can be easily defined with the following json structure parameters.

• Width
• Height
• PositionX
• PositionY
• Align
• BackgroundColor
• MarginTop
• MarginBottom
• MarginRight
• MarginLeft
• RoundHeight
• RoundWidth
• BorderColor
• BorderWidth
• ItemSpace
• ItemHeight
• ItemWidth
• ItemColumnCount
• ListType ('List' - 'Cart' - 'Fluid')

When the standard Listview definition was made, the search bar was automatically defined at the top. It is not included in ProListView. For this we need to define the "AddNewProSearchEdit" component. We will define it in the next steps. Let's first define the ProListView object.

Var

testListview : TClProListView;

Let's define ProListView in MyForm and define json structure and parameters in it. Within the json structure, "List","Cart" and "Fluid" properties can be defined as ListType of our ProListView structure.
If List is selected in these properties, it displays data as List.
If we choose the Cart property, we need to specify how many data should be added to each column ("ItemColumnCount" : 2,).
If we choose the Fluid feature, it automatically adds as much as it can fit by looking at the size of the data added to the list according to the screen size. As soon as there is an overflow, it moves to a lower line and in this way the data is listed.

testListview := MyForm.AddNewProListView(MyForm,'testListview');
clComponent.SetupComponent(testListview,'{"Height" : 150,"Align":"Client","MarginBottom":20,"MarginTop":20,"MarginRight":20,"MarginLeft":20, "ListType":"Cart","ItemHeight" : 150,"ItemWidth":150,"BackgroundColor":"#CEF3FE", "BorderColor":"#26DE90","BorderWidth":2,"RoundWidth":5, "RoundHeight":5}');
MyForm.AddNewEvent(testListview,tbeOnItemClick,'onItemClicked');

The scrollable feature becomes active when data is added to the ProListView structure. If you do not specify the scrolling as described below, it defaults to "vertical". This means that the vertical scroll feature is turned on. If you want to make horizontal scrolling feature, you should make a definition (horizontal) as below.

testListview.ListType := 'horizontal';

Another feature of ProListView is that you can specify the spacing between listed variables. You can do this with the following piece of code.

testListview.Properties.ItemSpace := 10;

To access the data of the clicked item within a ListView, "clSelectedItemData" is used:

testListview.clSelectedItemData(clRecord_GUID)

If we want to add a search bar in ProListView, we must first define the "TClProSearchEdit" variable and create a Search Edit object. Browse to the AddNewProSearchEdit field to create this description.
Before starting to design into ProListView, DesignerPanel must be added to it. And the whole design can be done within this panel. Examine the AddNewProListViewDesignerPanel field for the DesignerPanel definition. Now let's look at a simple example of using ProListView. We will get the datas through sql database.

 When performing local SQL operations, you must write your database information in the red fields in the code section, otherwise the code will not work. 

Example:

Var  
MyForm:TclForm;
testListview : TClProListView;
testDesignerPanel : TClProListViewDesignerPanel;
productName,productPrice : TClProLabel;

procedure SetupSqlConnection;
begin
   Clomosy.DBSQLServerConnect('SQL Server','server_name','user_name','user_password','database_name',port);
end;

procedure AddDataToListview;
Var
  foodListQuery : TClSqlQuery;
begin
  foodListQuery := TClSqlQuery.Create(nil);
  try
     foodListQuery.Connection := Clomosy.DBSQLServerConnection;
     foodListQuery.SQL.Text := 'SELECT productId as RECORD_GUID, productName, productPrice from Products';
     foodListQuery.Open;
     if foodListQuery.Found then
     begin
        testListview.clLoadProListViewDataFromDataset(foodListQuery);
     end;
  finally
     foodListQuery.Close;
     foodListQuery.Free;
  end;
 end; 

 procedure onItemClicked;
 begin
   ShowMessage('--' +testListview.clSelectedItemData(clRecord_GUID));
 end;
 procedure CreateDesignerPanel;
 begin
     testDesignerPanel := MyForm.AddNewProListViewDesignerPanel(testListview,'testDesignerPanel'); 
     clComponent.SetupComponent(testDesignerPanel,'{"Height":100,"Width" : 150,"BackgroundColor":"#F6EDDB","BorderColor":"#F5BCC9","BorderWidth":2,"RoundHeight":20,"RoundWidth":20}');
     testListview.SetDesignerPanel(testDesignerPanel);
 end;

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

 procedure CreateProductNameAndPrice;
 begin
    productName := MyForm.AddNewProLabel(testDesignerPanel,'productName','test');
    clComponent.SetupComponent(productName,'{"MarginTop":10,"MarginLeft":10,"MarginRight":10,"MarginBottom":10 ,"Height":20,"Align" : "MostTop"}');
    testDesignerPanel.AddPanelObject(productName,clCaption);
    productName.Properties.AutoSize := True;
    
    productPrice := MyForm.AddNewProLabel(testDesignerPanel,'productPrice','test');
    clComponent.SetupComponent(productPrice,'{"MarginTop":10,"MarginLeft":10,"MarginRight":10,"MarginBottom":10 ,"Height":20,"Align" : "MostRight","Width":40}');
    testDesignerPanel.AddPanelObject(productPrice,clText);
    productPrice.Properties.AutoSize := True;
 end;
begin
  MyForm := TclForm.Create(Self);
  CreateListView;
  CreateDesignerPanel;
  SetupSqlConnection;
  CreateProductNameAndPrice;
  AddDataToListview;
  MyForm.Run;
end;

Output: