Smart Phone Style Lists with QuantumGrid

A poster on the Developer Express forums recently inquired on how to use the VCL QuantumGrid to mimic a smart phone styled list. You can see an example of the desired appearance here:

Smart Phone List Example

Notable aspects of this style are:

  • Data in a single row arranged both vertically and horizontally
  • Varying cell heights within a single row
  • Single row selection (rather than cell selection)
  • Independent cell styles
  • No column headers or cell captions

Luckily the QuantumGrid is up to the challenge. Here is an example of a smart phone styled list using the QuantumGrid and Delphi XE2:

QuantumGrid Smart Phone List

This can be accomplished using the “banded” table view in the QuantumGrid. A banded table view lets you group columns together into bands. Each band can have a variable number of vertically or horizontally stacked columns. The above example is composed of three bands and four columns: one column (with double-height) in the first band, two columns stacked vertically in the second, and a single column in the third band.

Adding and organizing bands and columns is made easy using the right-click context menu of the QuantumGrid. Starting with a simple banded table view, here is a brief video that shows how easy it is to add and layout the bands and columns necessary to achieve the above affect.

Once the banded table view has the proper bands and columns added, the following settings should be applied to the table view in the object inspector:

OptionsData.Editing = False
OptionsSelection.CellSelect = False
OptionsView.ColumnAutoWidth = True
OptionsView.GridLines = glNone
OptionsView.GroupByBox = False
OptionsView.Header = False
OptionsView.RowSeparatorColor = clGrayText
OptionsView.RowSeparatorWidth = 1
OptionsView.BandHeaders = False

With these settings in place, all that is needed is a bit of sample data and some contact thumbnails to complete the effect. You can download the source of this sample project here.

Updated 5/10/2012: DevExpress employee Alex M had this to say on the forums:

I think that making CountColumn right aligned will add a final touch to the look and feel.
TextEditProperties.Alignment.Horz := taRightJustify;
Also, I believe using a band’s context menu introduced in DevExpress VCL Build v2011 vol 2  (try once, love it forever 🙂 ) would simplify column/band creation and arrangement shown in the video.

I’ve updated the sample and video to reflect Alex’s suggestions. Thanks Alex!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s