Advanced MultiSelection Dialog

This code snippet provides a Symbian-specific custom QML dialog which allows to select multiple items from list (AdvMultiSelectionDialog).

Article Metadata

---

Tested with

SDK: Nokia Qt SDK 1.2

Devices(s): all devices based on Symbian Anna, Nokia Belle

---

Compatibility

Platform(s): Symbian Anna, Nokia Belle

Device(s): All

Dependencies: Symbian Qt Quick Components 1.1

---

Platform Security

Capabilities: None

---

Article

Keywords: Qml, list, dialog, multiselection

Created: Den123 (14 Mar 2012)

Last edited: Den123 (14 Mar 2012)

Overview

The code snippet below shows the full QML-component that implements this functionality.

The component uses CommonDialog as a base and offers following settings:

• function selectedItemsIdx() - this function returns array of selected indices.

Source code

AdvMultiSelectionDialog.qml:

import QtQuick 1.1
import com.nokia.symbian 1.1
 
CommonDialog {
    id: root
    privateCloseIcon: true // show close button in the right corner of dialogs title
 
    function launch( items ) {
        listModel.clear()
        for( var i in items )
            listModel.append( items[i] )
 
        open()
    }
 
    function selectedItemsIdx()
    {
        var arr = []
        for( var i = 0; i < listModel.count; i++ )
            if( listModel.get(i).selected )
                arr.push( i )
 
        return arr
    }
 
    buttonTexts: [ qsTr( "Ok" ) ] // Ok button
    onButtonClicked: accept()     // Ok was pressed
 
    content: Item {
        anchors.left:  parent.left
        anchors.right: parent.right
        height: 210 // move this value to js-file
 
        ListView {
            id: lst
            anchors.fill: parent
            anchors.margins: platformStyle.paddingMedium
            clip: true
 
            model: listModel
            delegate: listDelegateComponent
        }
 
        ScrollDecorator {
            flickableItem: lst
        }
    }
 
    ListModel { id: listModel }
 
    Component {
        id: listDelegateComponent
 
        ListItem {
            id: listItem
            Item {
                anchors.fill: parent
                Column {
                    anchors.left:  parent.left
                    anchors.right: checkBox.left
                    clip: true
                    ListItemText {
                        id: titleText
                        mode: listItem.mode
                        role: "Title"
                        text: title
                    }
                    ListItemText {
                        id: subtitleText
                        mode: listItem.mode
                        role: "SubTitle"
                        text: subTitle
                    }
                }
 
                CheckBox {
                    id: checkBox
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.right: parent.right
                    anchors.rightMargin: platformStyle.paddingMedium
                    checked: selected
                    onCheckedChanged: listModel.get( index ).selected = checked
                }
            }
        }
    }
}

How to use:

    ToolButton {
        anchors.centerIn: parent
            text: qsTr( "MultiSelectionDialog" )
            onClicked: {
                multiSelectionDialog.launch( [ { title: "item1", subTitle: "item1 description", selected: true  },
                                               { title: "item2", subTitle: "item2 description", selected: false },
                                               { title: "item3", subTitle: "item3 description", selected: true  },
                                               { title: "item4", subTitle: "item4 description", selected: false },
                                               { title: "item5", subTitle: "item5 description", selected: false }
                                             ]
                )
            }
    }
 
    AdvMultiSelectionDialog {
        id: multiSelectionDialog
        titleText: qsTr( "Select Items" )
 
        onAccepted: {
            var arr = multiSelectionDialog.selectedItemsIdx()
            console.log( "selected item indexes: " )
            for( var x in arr )
                console.log( arr[x] )
        }
    }