×
Namespaces

Variants
Actions

Advanced MultiSelection Dialog

From Nokia Developer 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 11:49.
47 page views in the last 30 days.