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.

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;

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.