Adding alphabetical ordering to your databound ListViews

Posted by on in Blogs
Working with Custom LiveBindings Expressions

Using LiveBindings, custom LiveBindings expressions and TListView, it it easy to add ListView headers to your FM mobile application that support alphabetical ordering and various other customizations. It will only take a couple of steps to enable it for data that is already alphabetically sorted, and an additional step for unsorted data.

Adding A-Z grouping to your ListView headers for alphabetically sorted data

The first example uses a TListView that is aligned to the client and bound into sample data. I created a new mobile application, added TListView, set alignment to alClient and added a PrototypeBindSource component to it. I then right-clicked on my PrototypeBindSource component and added ColorsName1.

In the LiveBindings Designer (View-LiveBindings Designer), I bound ColorsName into ItemHeader.Text and also into Item.Text. With the ItemHeader.Text binding selected, I added the following custom expression to the FillHeaderCustomFormat field:   SubString(%s, 0, 1) .

While the ColorsName sample data is sorted by default, 'repeat' and 'shuffle' are enabled by default which you will have to disable for sorting.  You can disable it by selecting PrototypeBindSource1 in the Structure view, clicking on the FieldDefs node, and then on the 0 - ColorsName1 subnode. Then expand the Options dialog and uncheck 'optShuffle' and 'optRepeat'.

Adding A-Z grouping to your ListView headers for data that is not already sorted

I recently did a blog post on how to build a Surf Spot Finder app using REST services.

I wanted to sort the surf spots in alphabetical order, but in this case, the data I am getting via REST is not already ordered. Below are the 3 steps I had to follow:

First, select the FDMemTable component in The Object Inspector. Click on the ... for the IndexFieldNames property in the Object Inspector. Under Source Fields, I selected 'spot_name', clicked the > button to add it as my 'Included Field' and then clicked on OK.

Next, in the LiveBindings Designer, I selected the ItemHeader.Text -> FDMemTable1 binding.

Then, in the Object Inspector, I set FieldName to 'spot_name' and FillHeaderFieldName to 'spot_name'.

I also entered the following expression in the FillHeaderCustomFormat field: SubString(%s, 0, 1).

Voila. I now have my surf spots displayed in alphabetical order.

In closing, I thought I would show one more example. In this case, I just have a list of names (using sample data from the PrototypeBindSource component) that I want to annotate with a prefix. In my case, I wanted to add the word 'Employee' before the name that I am getting from my datasource.

To do so, select the Item.Text -> ContactName1 binding and enter   "Employee " + UpperCase(%s) in the FillDisplayCustomFormat field.



Gold User, Rank: 5, Points: 558
Senior Product Manager, RAD Studio


  • Guest
    Kelver Merlotti Wednesday, 8 January 2014

    Hi Sarina! What about numbers formatting? How to put thousand and/or decimal separator? Thanks!

  • Guest
    sarinadupont Monday, 13 January 2014

    Hi Kelver,

    The OnGetText event can be used to format the field value.

    When the FDMemTable is opened, assign an event handler to the TField.OnGetText property:

    procedure TSurfSpotFinder.FDMemTable1AfterOpen(DataSet: TDataSet);
    FDMemTable1.FieldByName('spot_name').OnGetText := SpotNameGetText;

    procedure TSurfSpotFinder.SpotNameGetText(Sender: TField;
    var Text: string; DisplayText: Boolean);
    Text := UpperCase(Sender.AsString);

    For a numeric field, the event handler could use FloatToStrF to add separators:

    Text := FloatToStrF(Sender.AsFloat, ffNumber, 8, 4);


  • Please login first in order for you to submit comments
  • Page :
  • 1

Check out more tips and tricks in this development video: