Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

Advanced MultiSelection Dialog

From Wiki
Jump to: navigation, search

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

AdvMultiSelection Dialog

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] )
}
}
This page was last modified on 14 March 2012, at 08:49.
88 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×