How to get a ListView to display your values in columns

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;

Right?

Wrong.

When you do it like this, it comes out as a long list of values all in a single column.

ListView displaying values as a list despite vsReport ViewStyle

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.

How Windows Explorer displays files in Details view style

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;

Tips
– 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 vsReport ViewStyle.

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.

ListView with Proper Columns

Posted in Software Development
Tags: , , ,
6 comments on “How to get a ListView to display your values in columns
  1. Great article and well explained. Thanks a bunch.

  2. I knew all this, but it is still a nice reference to point people to, that don’t.

  3. Edwin Yip says:

    Really well explained, by comparing the results and by providing screenshots 🙂

  4. Ken Randall says:

    How about for Firemonkey?

  5. Mojgan says:

    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.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

Show Buttons
Hide Buttons