• Home

SortFilterProxyModel

Allows to apply filter and sorting settings to QML ListModel items. More...

• List of all members, including inherited members

Properties

• count : int
• filters : list<Filter>
• proxyRoles : list<ProxyRole>
• sortRoleName : string
• sorters : list<Sorter>
• sourceModel : QAbstractItemModel*

Methods

• variant get(int row, string roleName)
• object get(int row)
• int mapFromSource(int sourceRow)
• QModelIndex mapFromSource(QModelIndex sourceIndex)
• int mapToSource(int proxyRow)
• index mapToSource(index proxyIndex)
• int roleForName(string roleName)

Detailed Description

SortFilterProxyModel is an implementation of QSortFilterProxyModel conveniently exposed for QML. You can use it to apply filter and sorting settings to your QML ListModel items.

The following relevant types are available:

Types

Filter

ProxyRole

Sorter

For detailed information on the SortFilterProxyModel, please see the project on GitHub.

Example Usage

Simple Example

The folowing example shows the configured entries of the ListModel in a ListPage, and allows to sort the list using the name property:

 import Felgo 3.0
 import QtQuick 2.0

 App {
   // data model
   ListModel {
     id: fruitModel

     ListElement {
       name: "Banana"
       cost: 1.95
     }
     ListElement {
       name: "Apple"
       cost: 2.45
     }
     ListElement {
       name: "Orange"
       cost: 3.25
     }
   }

   // sorted model for list view
   SortFilterProxyModel {
     id: filteredTodoModel
     sourceModel: fruitModel

     // configure sorters
     sorters: [
       StringSorter {
         id: nameSorter
         roleName: "name"
       }]
   }

   // list page
   NavigationStack {
     ListPage {
       id: listPage
       title: "SortFilterProxyModel"
       model: filteredTodoModel
       delegate: SimpleRow {
         text: name
         detailText: "cost: "+cost
         style.showDisclosure: false
       }

       // add checkbox to activate sorter as list header
       listView.header: AppCheckBox {
         text: "Sort by name"
         checked: nameSorter.enabled
         updateChecked: false
         onClicked: nameSorter.enabled = !nameSorter.enabled
         anchors.horizontalCenter: parent.horizontalCenter
         height: dp(48)
       }
     } // ListPage
   } // NavigationStack
 } // App

Advanced Example

This example loads JSON data from a REST API, wraps it in a QML ListModel and uses SortFilterProxyModel to apply filter and sorting settings:

 import Felgo 3.0
 import QtQuick 2.0

 App {

   // full data model, will be filled with data loaded from REST API in loadTodos()
   ListModel {
     id: todoModel
     Component.onCompleted: loadTodos()

     // load data via http request
     function loadTodos() {
       HttpRequest.get("https://jsonplaceholder.typicode.com/todos")
       .then(function(res){
         // map JSON to QML ListModel
         res.body.forEach(function(todo) {
           todoModel.append(todo)
         })
       })
     }
   }

   // filter settings are grouped in this item
   Item {
     id: filterSettings
     property bool sortByTitleActive: false
     property bool completedFilterActive: false
     property int userIdFilterValue: -1
   }

   // filtered model for list view
   SortFilterProxyModel {
     id: filteredTodoModel
     sourceModel: todoModel
     // configure filters
     filters: [
       ValueFilter {
         roleName: "completed"
         value: true
         enabled: filterSettings.completedFilterActive
       },
       ValueFilter {
         roleName: "userId"
         value: filterSettings.userIdFilterValue
         enabled: filterSettings.userIdFilterValue > 0
       }]
     // configure sorters
     sorters: [
       StringSorter {
         roleName: "title"
         enabled: filterSettings.sortByTitleActive
       }]
   }

   // list page
   NavigationStack {
     ListPage {
       id: listPage
       title: "SortFilterProxyModel"
       model: filteredTodoModel
       delegate: SimpleRow {
         text: title
         detailText: "user: "+userId+", completed: "+completed+", id: "+id
         style.showDisclosure: false
       }

       // add UI for filter options as list header
       listView.header: Column {
         x: spacing
         width: parent.width - 2 * spacing
         spacing: dp(5)

         // top spacer
         Item { width: parent.width; height: px(1) }

         // completed filter
         AppCheckBox {
           text: "Completed only"
           checked: filterSettings.completedFilterActive
           updateChecked: false
           onClicked: filterSettings.completedFilterActive = !filterSettings.completedFilterActive
         }

         // user id filter
         Row {
           spacing: parent.spacing
           AppText {
             text: "User ID"
             anchors.verticalCenter: parent.verticalCenter
           }
           AppTextField {
             id: userFilterText
             anchors.verticalCenter: parent.verticalCenter
             inputMethodHints: Qt.ImhFormattedNumbersOnly
             onAccepted: {
               if(text === "")
                 filterSettings.userIdFilterValue = -1
               else {
                 userFilterText.text = parseInt(userFilterText.text)
                 filterSettings.userIdFilterValue = userFilterText.text
               }
               listPage.forceActiveFocus()
             }
           }
         }

         // sort by title
         AppCheckBox {
           text: "Sort by title"
           checked: filterSettings.sortByTitleActive
           updateChecked: false
           onClicked: filterSettings.sortByTitleActive = !filterSettings.sortByTitleActive
         }

         // bottom spacer
         Item { width: parent.width; height: px(1) }
       }
     } // ListPage
   } // NavigationStack
 } // App

Property Documentation

Method Documentation