Running the FMX.TabletMasterDetailwithSearch Sample, it shows you two columns. The column on the left-hand side shows a list of people and includes a search box. The column on the right-hand side shows details (a picture, name, job and “description”) about the person currently selected on the list view.

You can tap list view entries to select them and load their information on the right-hand side column. You can also click the Prior and Next button on the top-right corner of the application to navigate the list view items.

You can also enter text in the search box of the list view to filter the list of people.

Location

You can find the TabletMasterDetailwithSearch Sample sample project at:

• Start | Programs | Embarcadero RAD Studio Sydney | Samples and navigate to:
  • Object PascalMulti-Device SamplesUser InterfaceTabletMasterDetailWithSearch
  • CPPMulti-Device SamplesUser InterfaceTabletMasterDetailWithSearch

How to Use the Sample

1. Navigate to the location given above and open:
   • Delphi: TabletMasterDetailwithSearch.dproj.
   • C++: TabletMasterDetailwithSearch.cbproj.
2. Press F9 or choose Run > Run.

Implementation

This application uses a list view populated using LiveBindings, specifically a TPrototypeBindSource.

This application handles the OnItemClick event of the list view with a procedure that takes the TPrototypeBindSource to the clicked entry, so that the right-hand side column of the application shows that information.

This application contains a TActionList with two actions that are associated with the Prior and Next buttons. These actions are the standard TFMXBindNavigatePrior and TFMXBindNavigateNext actions and they are linked with the TPrototypeBindSource through their DataSource property and have event handlers for their OnExecute and OnUpdate events. The Execute event handler takes the TPrototypeBindSource to the next entry and the Update event handler disables when there is no prior or following item, respectively.

The SearchVisible property of the list view is True, so that the list view shows a search box to filter the list view items. The Update event handler of the Prior and Next actions disables these actions when the list view is filtered.

Please follow the link to the original post for more details about this sample:

http://docwiki.embarcadero.com/CodeExamples/Sydney/en/FMX.TabletMasterDetailwithSearch_Sample

Head over and check out the full source code for the cross-platform Tablet Master Detail with Search sample on Embarcadero’s GitHub.

---

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

   Free Delphi Community Edition   Free C++Builder Community Edition

---