Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business


A control that allows to jump to specific sections of a ListView. More...

Import Statement: import Felgo 3.0
Since: Felgo 2.9.2




  • selected(string character, int itemIndex)


Detailed Description

The SectionSelect control provides a side-bar that allows to alphabetically jump to the corresponding sections of a ListView. The side-bar has a native look on iOS & Android and takes the Theme colors into account.

iOS Android

Example Usage

 import Felgo 3.0

 App {
   NavigationStack {

     ListPage {
       id: listPage
       title: "SectionSelect"

       listView.bottomMargin: nativeUtils.safeAreaInsets.bottom
       listView.anchors.rightMargin: sectionSelect.width

       // Add dummy entries for list page
       model: {
         var model = []
         for (var i = 0; i < 26; i++) {
           for (var j = 0; j < 5; j++) {
             var entry = {
               text: String.fromCharCode(65 + i) + " " + j,
               // For section display in list
               section: "Section: " + String.fromCharCode(65 + i),
               // Only for SectionSelect, the actual sections all start with 'Section ...'
               letter: String.fromCharCode(65 + i)
         return model
       delegate: SimpleRow { }

       // Activate sections
       section.property: "section"

       SectionSelect {
         id: sectionSelect
         anchors.right: parent.right
         target: listPage.listView
         sectionProperty: "letter"
         bottomMargin: nativeUtils.safeAreaInsets.bottom

Property Documentation

autoUpdate : bool

Whether the control synchronizes with the target to automatically update when the model or sectionProperty changes. Defaults to true. Deactivate this setting to manually update the view with the update() function.

This property was introduced in Felgo 3.10.0.

See also update().

bottomMargin : real

Add additional bottom margin below the last section. This can be used to respect the bottom safe area on mobile devices. The default value is 0.

This property was introduced in Felgo 3.9.0.

caseSensitive : bool

Set to true to operate the control in case-sensitive mode. The control then only counts entries that start with an uppercase section character.

This property was introduced in Felgo 3.10.0.

ignoreDiacritics : bool

If active, diacritical marks are ignored, which makes the control insensitive to accent characters. For example, letters like Ä and ê are countent as their un-accented variants A and e then.

This property was introduced in Felgo 3.10.0.

sectionProperty : string

The name of the section property within the target ListView's model. The target section.property is used by default. Using a custom section property for the SectionSelect allows to use different sections for the SectionSelect control and the actual sections displayed in the ListView.

target : Item

The target ListView of the SectionSelect control. The SectionSelect will read the target's model data and move the list to the chosen section when clicked.

Signal Documentation

selected(string character, int itemIndex)

Fires whenever the user touches the control on a valid section that exists in the target model.

Note: The corresponding handler is onSelected.

This signal was introduced in Felgo 3.10.0.

Method Documentation

void update()

Calling this method updates the SectionSelect to reflect the entries of the target view. This synchronization is done automatically at component creation and whenever the sectionProperty or target changes. To manually control all view updates, deactivate the autoUpdate property.

This method was introduced in Felgo 3.10.0.

See also autoUpdate.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded