Can’t get a ListView to display the values from your database in columns properly?
You want to display information from your database. You would like it to be displayed in a list with columns. A ListView can do that.
Should be as easy as 1-2-3.
Just set up a query, loop through the records and add the field values to the ListView. Something like this:
begin SQLQuery.SQL.Text := 'SELECT FirstName, LastName, Country FROM Famous_Actresses'; SQLQuery.Open; while not SQLQuery.Eof do begin ListView.AddItem('First name: ' + SQLQuery['FirstName'], nil); ListView.AddItem('Last name: ' + SQLQuery['LastName'], nil); ListView.AddItem('Country: ' + SQLQuery['Country'], nil); end; end;
When you do it like this, it comes out as a long list of values all in a single column.
That’s not what you want.
You want a nice orderly list in which every field has its own column. Just like how Windows Explorer displays files in its details view.
Relax. You’re half way there.
Just two things left to do:
– Tell the ListView about the columns you want it to display.
– Add the values from your database to their specific columns.
Setting up columns for a ListView
You can add columns to a ListView in the visual form designer by double clicking the Columns property of the ListView and adding the columns you need. While easy to do, you now have tied that ListView to a specific set of columns. And I bet you that you will have plenty more lists to show in any application worth using.
When you know how to do those things in code, you give yourself the option of reusing a single form for many lists.
So, let’s do it in code:
var Column: TListColumn; begin // Set up columns Column := ListView.Columns.Add; Column.Caption := 'First Name'; Column.Alignment := taLeftJustify; Column.Width := -1; Column := ListView.Columns.Add; Column.Caption := 'Last Name'; Column.Alignment := taLeftJustify; Column.Width := -1; Column := ListView.Columns.Add; Column.Caption := 'Country'; Column.Alignment := taLeftJustify; Column.Width := 140; end;
– Set a column’s Width to
-1 to make the column display its entire text.
– Set a column’s AutoSize to true to make it resize proportionally when the Width of the ListView changes.
Adding values to specific columns
Now that you have the columns set up, you are all set to make the ListView display your information as you want it. The only thing left to do is to add the values from your database in the way the ListView expects it for the
You already got most of the code right in your first try. Just change the lines where you added items to the ListView to:
var Item: TListItem; begin Item := ListView.Items.Add; Item.Caption := SQLQuery['FirstName']; Item.SubItems.Add(SQLQuery['LastName']); Item.SubItems.Add(SQLQuery['Country']); end;
And now you have a well behaved ListView that displays your database values in columns properly.
Great article and well explained. Thanks a bunch.
I knew all this, but it is still a nice reference to point people to, that don’t.
Really well explained, by comparing the results and by providing screenshots 🙂
How about for Firemonkey?
Ah, haven’t gotten round to playing with the monkey yet… Maybe at a future date?
Hi Dimitri,If you look under the hood, you’ll see that the tree is generated using an old vosiren of jsTree (v0.9.9a2).Before adding new functionalities like drag and drop, it’s a good idea to consider using the latest vosiren of jsTree (v1.0rc2). By looking at the “changelog”, we learn that there was a complete rewrite of the code. We can’t just replace the older files used by APEX with the new ones.After talking to Patrick Wolf, I decided to build a plug-in region for my AJAX Tree.
I tried to use the codes above but i dont know where to put the codes. Where do i double click to insert the code?