TClProListView

function AddNewProListView(AComponent: TCLComponent; xName: string): TClProListView;

AComponent : Specifies the parent of the object to be defined.

xName : The name of the defined listview should be written.

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.
Besides, you use this component when you want to pull data from the database.

Refer to the TclListView page for standard listview usage.

Feature	Use of	Definition
TClProListView	ProListview1 : TClProListView;	A variable belonging to the TClProListView class is created.
AddNewProListView	ProListview1 = Form1.AddNewProListView(Form1,'ProListview1');	A new TClProListView component is added to the form.
ListType	ProListView1.ListType = 'horizontal'; //vertical	It is used to set the listing direction. The default value is vertical.
Properties.ItemSpace	ProListView1.Properties.ItemSpace = 10;	The spacing between listed items is defined.
clSelectedItemData	ProListView1.clSelectedItemData(clRecord_GUID)	To access the data of the clicked item within a ListView, "clSelectedItemData" is used.
clearList	ProListView1.clearList;	Clears all content of the ListView object.

In TclListView usage, a search bar is included. However, when TclProListView is created, the search bar does not appear. For this, the TClProSearchEdit object should be used.

clProSettings Properties

BorderColor

BorderWidth

BackgroundColor

IsTransparent

IsFill

IsRound

RoundHeight

RoundWidth

ColCount

ItemSpace

ItemWidth

ItemHeight

ViewType

SetupComponent Properties

Width

Height

PositionX

PositionY

Align

BackgroundColor

MarginTop

MarginBottom

MarginRight

MarginLeft

RoundHeight

RoundWidth

BorderColor

BorderWidth

ItemSpace

ItemHeight

ItemWidth

ItemColumnCount

ListType ('List' - 'Cart' - 'Fluid')

To learn the purpose and usage of the SetupComponent and clProSettings properties, please refer to the page.

Example 1: Use of TclProListView

For clProSettings:

Var   
  Form1:TclForm;
  ListView1 : TClProListView;
  
{
  Form1 = TclForm.Create(Self);
  ListView1 = Form1.AddNewProListView(Form1,'ListView1');
  ListView1.Align = AlClient;
  ListView1.Margins.Bottom = 20;
  ListView1.Margins.Top = 20;
  ListView1.Margins.Right = 20;
  ListView1.Margins.Left = 20;
  ListView1.clProSettings.ViewType = lvIcon; //(lvList, lvIcon, lvWaterFall)
  ListView1.clProSettings.ColCount = 1;
  ListView1.clProSettings.ItemHeight = 100;
  ListView1.clProSettings.ItemSpace = 10;
  ListView1.clProSettings.BackgroundColor = clAlphaColor.clHexToColor('#FFFCFF');
  ListView1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#66FF7F');
  ListView1.clProSettings.BorderWidth = 2;
  ListView1.clProSettings.RoundHeight = 5;
  ListView1.clProSettings.RoundWidth = 5;
  ListView1.SetclProSettings(ListView1.clProSettings);
  Form1.Run;
}

For SetupComponent:

Var   
  Form1:TclForm;
  ListView1 : TClProListView;
  
{
  Form1 = TclForm.Create(Self);
  ListView1 = Form1.AddNewProListView(Form1,'ListView1');
  clComponent.SetupComponent(ListView1,'{
  "Align" : "Client",
  "MarginTop" : 20,
  "MarginBottom":20,
  "MarginRight":20,
  "MarginLeft":20, 
  "ListType":"Cart",
  "ItemColumnCount" : 1,
  "ItemHeight" : 100,
  "ItemSpace" : 10,
  "BackgroundColor":"#FFFCFF", 
  "BorderColor":"#66FF7F",
  "BorderWidth":2,
  "RoundHeight":5,
  "RoundWidth":5
}');
  Form1.Run;
}

Example 2: Listing with JSON

In the example, a form is created and a TclProListView is added to it. The TclProListView is configured with specific properties, and a design panel (TclListViewDesignerPanel) is added. An image (TclProImage) and a label (TclProLabel) are added to the design panel. An item click event (tbeOnItemClick) is defined, which displays the selected item when triggered. Finally, JSON formatted data is loaded into the list, and the form is run.

Var   
  Form1:TclForm;
  ListView1 : TClProListView;
  DesignerPanel1 : TClListViewDesignerPanel;
  taskName : TclProLabel;
  taskImg : TclProImage;
  
void TaskClick;
{
  ShowMessage(' Item: ' + ListView1.clSelectedItemData(clText));
}

void CreateListView
{
  ListView1 = Form1.AddNewProListView(Form1,'ListView1');
  ListView1.Align = AlClient;
  ListView1.Margins.Bottom = 20;
  ListView1.Margins.Top = 20;
  ListView1.Margins.Right = 20;
  ListView1.Margins.Left = 20;
  ListView1.clProSettings.ViewType = lvIcon; //(lvList, lvIcon, lvWaterFall)
  ListView1.clProSettings.ColCount = 1;
  ListView1.clProSettings.ItemHeight = 100;
  ListView1.clProSettings.ItemSpace = 10;
  ListView1.clProSettings.BackgroundColor = clAlphaColor.clHexToColor('#FFFCFF');
  ListView1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#66FF7F');
  ListView1.clProSettings.BorderWidth = 2;
  ListView1.clProSettings.RoundHeight = 5;
  ListView1.clProSettings.RoundWidth = 5;
  ListView1.SetclProSettings(ListView1.clProSettings);
}

void CreateDesignerPanel
{
  DesignerPanel1 = Form1.AddNewProListViewDesignerPanel(ListView1, 'DesignerPanel1');
  DesignerPanel1.Height = 100;
  DesignerPanel1.Width = 150;
  DesignerPanel1.clProSettings.BackgroundColor = clAlphaColor.clHexToColor('#B3FCE5');
  DesignerPanel1.clProSettings.BorderColor = clAlphaColor.clHexToColor('#16FF8C');
  DesignerPanel1.clProSettings.BorderWidth = 2;
  DesignerPanel1.clProSettings.RoundHeight = 20;
  DesignerPanel1.clProSettings.RoundWidth = 20;
  DesignerPanel1.SetclProSettings(DesignerPanel1.clProSettings);
  
  ListView1.SetDesignerPanel(DesignerPanel1);
}

void CreateData;
{
  taskImg = Form1.AddNewProImage(DesignerPanel1, 'taskImg');
  taskImg.Align = AlLeft;
  taskImg.Margins.Top = 10;
  taskImg.Margins.Bottom = 10;
  DesignerPanel1.AddPanelObject(taskImg, clImage1);

  taskName = Form1.AddNewProLabel(DesignerPanel1, 'taskName', 'test');
  taskName.Align = AlVertCenter;
  taskName.Height =30;
  taskName.Margins.Bottom = 10;
  taskName.Margins.Top = 10;
  taskName.Margins.Right = 10;
  taskName.Margins.Left = 10;
  taskName.clProSettings.FontColor = clAlphaColor.clHexToColor('#000000');
  taskName.clProSettings.FontSize = 20;
  DesignerPanel1.AddPanelObject(taskName, clText);
    
  Form1.AddNewEvent(ListView1,tbeOnItemClick,'TaskClick');
}

void AddDataToListView;
{
  ListView1.clLoadProListViewDataFromDataset(Clomosy.ClDataSetFromJSON('[
  {"taskName" : "Task 1", "taskImg" : "https://clomosy.com/learn/1Top.png"},
  {"taskName" : "Task 2", "taskImg" : "https://clomosy.com/learn/2Top.png"},
  {"taskName" : "Task 3", "taskImg" : "https://clomosy.com/learn/3Top.png"},
  {"taskName" : "Task 4", "taskImg" : "https://clomosy.com/learn/4Top.png"}
  ]'));
}

{
  Form1 = TclForm.Create(Self);
  CreateListView;
  CreateDesignerPanel;
  CreateData;
  AddDataToListview;
  Form1.Run;
}

Output:

Example 3: Listing with SQLite

 var
  MyForm : TclForm;
  PListView1 : TClProListView;
  DesignerPanel1 : TClProListViewDesignerPanel;
  productName,productPrice : TClProLabel;
  
  void SqLiteInsertData;
  {
    try
      Clomosy.DBSQLiteQuery.Sql.Text = '
    INSERT INTO Products (productId, productName, productPrice) VALUES (1, ''Iphone 11'', 18000.00);
    INSERT INTO Products (productId, productName, productPrice) VALUES (2, ''Xiaomi Redmi Note 11 Pro'', 15000.50);
    INSERT INTO Products (productId, productName, productPrice) VALUES (3, ''Omix X600'', 20000.75);
    INSERT INTO Products (productId, productName, productPrice) VALUES (4, ''Huawei Nova Y70'', 25000.00);
    INSERT INTO Products (productId, productName, productPrice) VALUES (5, ''Samsung Galaxy S20'', 30000.25);
    INSERT INTO Products (productId, productName, productPrice) VALUES (6, ''Iphone 14 Pro Max'', 50000.25);';
      Clomosy.DBSQLiteQuery.OpenOrExecute;
      
      ShowMessage('Adding data to the table was successful!');
    except
     ShowMessage('Exception Class: '+LastExceptionClassName+' Exception Message: '+LastExceptionMessage);
    }
  }
  
  void SqLiteConnectionCreateTable;
  var
    TableExists: Boolean;
  {
    try
      Clomosy.DBSQLiteConnect(Clomosy.AppFilesPath + 'DBProduct.db3', '');
 
      // Check if the table exists
      Clomosy.DBSQLiteQuery.Sql.Text = 'SELECT name FROM sqlite_master WHERE type="table" AND name="Products";';
      Clomosy.DBSQLiteQuery.OpenOrExecute;
      
      // Check the results
      TableExists = not Clomosy.DBSQLiteQuery.Eof;
      
      // Create the table if it does not exist
      if not (TableExists)
      {
        Clomosy.DBSQLiteQuery.Sql.Text = 'CREATE TABLE Products(productId INTEGER NOT NULL,
        productName TEXT NOT NULL,
        productPrice REAL NOT NULL,
        PRIMARY KEY (productId))';
        Clomosy.DBSQLiteQuery.OpenOrExecute;
        
        ShowMessage('Table successfully added to the database!');
        SqLiteInsertData;
      } else
      {
        ShowMessage('The Products table already exists.');
      }

    except
     ShowMessage('Exception Class: '+LastExceptionClassName+' Exception Message: '+LastExceptionMessage);
    }
  }
  
  void GetData;
  var
    Qry : TClSQLiteQuery;
  {
    try
      Qry = Clomosy.DBSQLiteQueryWith('SELECT productId as clRecord_GUID, productName, productPrice from Products');
      Qry.OpenOrExecute;
      if (Qry.Found)
      {
        PListView1.clLoadProListViewDataFromDataset(Qry);
      }
      
    except
      ShowMessage('Exception class: '+LastExceptionClassName+' Exception Message: ' +LastExceptionMessage);
    } 
  }

 void CreateListView;
 {
   PListView1 = MyForm.AddNewProListView(MyForm,'PListView1');
   PListView1.Properties.ItemSpace = 10;
   clComponent.SetupComponent(PListView1,'{"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}');
   PListView1.ListType = 'horizontal';
 }

  
    void CreateDesignerPanel;
 {
   DesignerPanel1 = MyForm.AddNewProListViewDesignerPanel(PListView1,'DesignerPanel1'); 
   clComponent.SetupComponent(DesignerPanel1,'{"Height":100,"Width" : 150,"BackgroundColor":"#F6EDDB","BorderColor":"#F5BCC9","BorderWidth":2,"RoundHeight":20,"RoundWidth":20}');
   PListView1.SetDesignerPanel(DesignerPanel1);
 }
 void CreateProductNameAndPrice;
 {
   productName = MyForm.AddNewProLabel(DesignerPanel1,'productName','test');
   clComponent.SetupComponent(productName,'{"MarginTop":10,"MarginLeft":10,"MarginRight":10,"MarginBottom":10 ,"Height":20,"Align" : "MostTop"}');
   DesignerPanel1.AddPanelObject(productName,clCaption);
   productName.Properties.AutoSize = True;
   
   productPrice = MyForm.AddNewProLabel(DesignerPanel1,'productPrice','test');
   clComponent.SetupComponent(productPrice,'{"MarginTop":10,"MarginLeft":10,"MarginRight":10,"MarginBottom":10 ,"Height":20,"Align" : "MostRight","Width":40}');
   DesignerPanel1.AddPanelObject(productPrice,clText);
   productPrice.Properties.AutoSize = True;
 }

  {
    MyForm = TclForm.Create(Self);
    CreateListView;
    CreateDesignerPanel;
    SqLiteConnectionCreateTable;
    CreateProductNameAndPrice;
    GetData;
    
    MyForm.Run;
  }

Output:

See Also

• Components
• Pro Object Properties
• Object Properties