RAD Studio 10.4.1 is now available! Learn more. Looking for discounts? Visit our Special Offers page!
News

Adding alphabetical sorting with A-Z headers to your lists

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).

order1_10447-4511398

customexpression1_10450-4696512

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

spotfinder2_10459-1475073

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.

employee_10453-5281482

 


Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial   Learn More About Upgrading

Deep Dive Webinar: Boost C++Builder Compile Speed with TwineCompile
Related posts
C++Delphi

Easily Add Slide Animations To Your Cross Platform Apps With Gesture Support In This FireMonkey Sample

DelphiRAD Studio

Get Started Building Cross-Platform Games In Delphi FireMonkey With Alien Invasion Sample

C++Delphi

Ultimate Compression Toolkit For Delphi And C++ Builder Developers

DelphiNews

RAD Studio with Delphi - The Original Low Code!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

IN THE ARTICLES