Author: Masood B6450
Using Visual LiveBindings, custom LiveBindings expressions and TListView, it it easy to add ListView headers to your 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 wrote an article 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.
Check out everything you need to know about Substring C++ in this informative blog.
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today
Free Delphi Community Edition Free C++Builder Community Edition
