TclListView

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.

AddNewListView (TComponent, xName): TclListView

TComponent : The variable name of the defined component is written. Here you should write the component variable name of whatever your component will be in.

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

Feature	Use of	Definition
TClListView	Listview1 : TClListView;	A variable belonging to the TClListView class is created.
AddNewListView	Listview1 = MyForm.AddNewListView(Form1,'testListview');	A new TClListView component is added to the form.
Width	Listview1.Width = 150;	Allows adjusting the width of the image.
Height	Listview1.Height = 50;	Allows adjusting the height of the image.
Align	Listview1.Align = alTop;	With the Align parameter, you can specify where you want our component to be aligned in the form. This parameter has multiple positioning properties. See the page to learn about these features.
Margins	Listview1.Margins.Left = 50; // Right, Top, Bottom	With the Margins parameter, you can give margins at any scale from the right, left, bottom, top.
clSelectedItemData	testListview.clSelectedItemData('MAIN_TEXT');	It is used to get information about the data clicked when the ListView is clicked. (You can call it with a procedure and use it in the desired field.) Instead of "MAIN_TEXT", you can call whatever location you have added data to in the ListView. Other parameters you can call below; SUB_TEXT SIDE_TEXT_TOP SIDE_TEXT_CENTER SIDE_TEXT_BOTTOM FOOTER_TEXT RECORD_GUID
CheckedProperty	Listview1.CheckedProperty = True;	It is an expression used to determine or set whether the items in the TclListView component are checked.
GetValueCheckBoxList	stringValue = Listview1.GetValueCheckBoxList('MAIN_TEXT');	It retrieves the value of the specified field for the selected items in ListView1. In the example, it will retrieve the data in the MAIN_TEXT field of the selected item.
CheckedCount	Listview1.Items.CheckedCount(true)	Returns the number of items selected in the ListView.

After making the definition, we will create the database connection. MSSQL database is used here.

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

So let's take a look at where they got this database information from.

You have learned your server name. You will have created your username and password while downloading sql. You make a connection entry with the information you created in the institution and write them in the code.
Now the last thing to do is to write your database name. For this, we create a database. Follow the steps below for creation.

Now that we have completed the database operations, we will add the data to the ListView.
For this, a new query is created and the "Clomosy.DBSQLServerConnection" connection is cloned.

Var
foodListQuery : TClSqlQuery;
begin
foodListQuery := TClSqlQuery.Create(nil);
foodListQuery.Connection := Clomosy.DBSQLServerConnection;

The sql query sentence to be executed in the query is defined.

foodListQuery.SQL.Text := 'SELECT productId as RECORD_GUID, productName as MAIN_TEXT,productPrice as SIDE_TEXT_BOTTOM from Products';

In order to define the above code, you must create a table in your database and add data to it. In this example we have added products. The product has a name and price.



Then we write our code above to our database. As below, the names of the columns in the database have been changed. We didn't change the database columns here, we just did the cloning.



So why did we change the columns this way? Could we write something else instead?
The reason we change it this way is ListView fields. Even though they are not actually visible on the screen, we can add data to positions such as write the information we get from a database into the Listview to the right, write to the left. Where else can we write on this screen, their names are available in the table below. From here, you can position your data in the area you want.

Listview Fields	Explanation
MAIN_TEXT	It is the main area. This place is in bold and is in the middle left.
SUB_TEXT	It is located just below "MAIN_TEXT".
SIDE_TEXT_TOP	It is located in the upper right corner.
SIDE_TEXT_CENTER	It is located in the middle right corner.
SIDE_TEXT_BOTTOM	It is located in the lower right corner.
FOOTER_TEXT	It is located in the lower left corner.
RECORD_GUID	(Unique field) product ids are written here.

View:

The query is run.

foodListQuery.Open;

If there is a record after the query is run, the relevant record is added to the list.

if foodListQuery.Found then
begin
testListview.clLoadListViewDataFromDataset(foodListQuery);
end;

Query is closed and freed.

foodListQuery.Close;
foodListQuery.Free;

Now the application is complete. As soon as the ListView component was defined, the search box could come up automatically. Now we will add a button to search by scanning the barcode on this search bar. For this, we will initially define the variable "TSearchBox" to access the search bar inside the ListView and then write the required code to access it.

Var
testSearchBox : TSearchBox;

testSearchBox := testListview.GetSearchBox;

We now have access to the searchBox. You can add a button to it and read the barcode with "CallBarcodeReader" and add it to the search bar. Let's look at the Scanning Barcode with ListView SearchBox page for an example application.

To tell you the truth, you have created a simple application that does nothing yet. Let's save and start using our project. You can save in one of two ways:
Click the save icon (the button in the upper right corner) or press Ctrl + S to save the project and see what you've done on the platforms now.

Example:

Base Syntax

 Var   
 MyForm:TclForm;
 testListview : TClListView;
 
 procedure onItemClicked;
  begin
  ShowMessage(testListview.clSelectedItemData('MAIN_TEXT'));
  end;
 procedure SetupSqlConnection;
 begin
   Clomosy.DBSQLServerConnect('SQL Server','server_name','user_name','user_password','database_name',1433);
 end;
 
 procedure CreateListView;
 begin
   testListview := MyForm.AddNewListView(MyForm,'testListview');
   testListview.Align := alClient;
   MyForm.AddNewEvent(testListview,tbeOnItemClick,'onItemClicked');
 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 as MAIN_TEXT,productPrice as SIDE_TEXT_BOTTOM from Products';
     foodListQuery.Open;
     if foodListQuery.Found then
     begin
       testListview.clLoadListViewDataFromDataset(foodListQuery);
     end;
   finally
     foodListQuery.Close;
     foodListQuery.Free;
   end;
 end;
 
 begin
  MyForm := TclForm.Create(Self);
 
  CreateListView;
  SetupSqlConnection;
  AddDataToListview;
  MyForm.Run;
   
 end;

TRObject Syntax

 Var   
   MyForm:TclForm;
   testListview : TClListView;
 
 void onItemClicked;
 {
   ShowMessage(testListview.clSelectedItemData('MAIN_TEXT'));
 }
 void SetupSqlConnection;
 {
   Clomosy.DBSQLServerConnect('SQL Server','server_name','user_name','user_password','database_name',1433);
 }
 
 void CreateListView;
 {
   testListview = MyForm.AddNewListView(MyForm,'testListview');
   testListview.Align = alClient;
   MyForm.AddNewEvent(testListview,tbeOnItemClick,'onItemClicked');
 }
 
 void AddDataToListview;
 Var
   foodListQuery : TClSqlQuery;
 {
   foodListQuery = TClSqlQuery.Create(nil);
   try
     foodListQuery.Connection = Clomosy.DBSQLServerConnection;
     foodListQuery.SQL.Text = 'SELECT productId as RECORD_GUID, productName as MAIN_TEXT,productPrice as SIDE_TEXT_BOTTOM from Products';
     foodListQuery.Open;
     if (foodListQuery.Found)
     {
       testListview.clLoadListViewDataFromDataset(foodListQuery);
     }
   finally
     foodListQuery.Close;
     foodListQuery.Free;
   }
 }
 
 {
   MyForm = TclForm.Create(Self);
   
   CreateListView;
   SetupSqlConnection;
   AddDataToListview;
   MyForm.Run;
 }

Output:

See Also

• Object Properties
• AddNewEvent