Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
New Developer
Posts: 92
Registered: ‎01-23-2009
My Device: Z10
My Carrier: klarmobil

Modify ListItem data in QML

I would like to change some values in some items in a ListView. If I have a list with some data added list this:

 

dataModel.insert({
   "key_one" : 0,
   "key_two" : 0});

 I can access them later

my_list_id.ListItem.data.key_one;

but it I try give some of them new values like

my_list_id.ListItem.data.key_one = 1;

 it does not work, the value stay unchanged. Whats wrong here?

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Modify ListItem data in QML

Maps can't be changed in QML you will need to map it to another var, change it then write it to your dataModel.

 


If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
New Developer
Posts: 92
Registered: ‎01-23-2009
My Device: Z10
My Carrier: klarmobil

Re: Modify ListItem data in QML

Oh ... that sucks. Is there a better suited data structure which can be modified?
Developer
Posts: 16,992
Registered: ‎07-29-2008
My Device: Z10 LE, Z30, Passport
My Carrier: O2 Germany

Re: Modify ListItem data in QML

i think you misunderstood BBSJdev.
You can assign it to a new var, then modify that one and replace it into your data model.
----------------------------------------------------------
feel free to press the like button on the right side to thank the user that helped you.
please mark posts as solved if you found a solution.
@SimonHain on twitter
New Developer
Posts: 92
Registered: ‎01-23-2009
My Device: Z10
My Carrier: klarmobil

Re: Modify ListItem data in QML

I undestand but this will not work for me in this case.

Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Modify ListItem data in QML

[ Edited ]

Why wouldn't it work? Which DataModel are you using?

This should work for GroupDataModel:

 

var data = ListItemData   // make a copy
data.key_one = 1    // modify a member
my_list_id.ListItem.view.dataModel.updateItem(   // update the model
  my_list_id.ListItem.indexPath, data)

 In ArrayDataModel the function is called replaceItem().

 


Andrey Fidrya, @zmeyc on twitter
New Developer
Posts: 92
Registered: ‎01-23-2009
My Device: Z10
My Carrier: klarmobil

Re: Modify ListItem data in QML

I use GroupDataModel but if I do this kind of update the list snaps back to first position.

Developer
Posts: 6,152
Registered: ‎07-05-2012
My Device: Playbook, Dev Alpha C, Z10 LE, Z30
My Carrier: Orange

Re: Modify ListItem data in QML

You can always set the position yourself after the update.

If you've been helped click on Like Button, if you've been saved buy the app. Smiley Happy

Developer of stokLocker, Sympatico and Super Sentences.
Developer
Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Modify ListItem data in QML

I've created a test project, but cannot reproduce this. List position is not changed when dataModel contents are modified.

 

GroupDataModel is sorting the items, so it can rearrange them when sorting key is changed.

But it shouldn't change scroll position.

 

Could you create a simple test project reproducing the issue you're observing (or maybe tweak mine)?

 

Paste the code below to main.qml in new Cascades project:

 

import bb.cascades 1.0

Page {
    onCreationCompleted: {
        for (var i = 0; i < 100; ++i) {
            var val1 = 'aaa' + i
            var val2 = 'bbb' + i
        	model.insert({'field1': val1,
        		'field2': val2})
        }
    }
    ListView {
        dataModel: GroupDataModel {
            id: model
            sortingKeys: ['field1']
            grouping: ItemGrouping.None
        }
        
        listItemComponents: [
            ListItemComponent {
                type: "item"
                StandardListItem {
                    title: ListItemData.field1 + '/' + ListItemData.field2
                    onTouch: {
                        if (event.isUp()) {
                            var data = ListItemData
                            data.field1 = data.field1 + ' [TOUCHED]'
                            ListItem.view.dataModel.updateItem(ListItem.indexPath, data)
                        }
                    }
                }
            }            
        ]
    }
}

 


Andrey Fidrya, @zmeyc on twitter
New Developer
Posts: 92
Registered: ‎01-23-2009
My Device: Z10
My Carrier: klarmobil

Re: Modify ListItem data in QML

My problem is a bit nested. Extracted from the rest it looks like this:

 

main.qml

import bb.cascades 1.0

Page {
    Container {
        
        layout: DockLayout { }

        ListView {
            id: multi_list

            maxHeight: 300
            maxWidth: 300

			horizontalAlignment: HorizontalAlignment.Center
			verticalAlignment: VerticalAlignment.Center

            layout: StackListLayout {
                orientation: LayoutOrientation.LeftToRight
            }

            dataModel: GroupDataModel {
                grouping: ItemGrouping.None
                sortingKeys: [ "position" ]
            }

            snapMode: SnapMode.LeadingEdge

            listItemComponents: [
                ListItemComponent {
                    type: "unit_list"
                    QuantitySelectList { }
                }
            ]

            attachedObjects: [
                ImagePaintDefinition {
                    id: background_typeA
                    imageSource: "asset:///images/typeA.png"
                },
                ImagePaintDefinition {
                    id: background_typeB
                    imageSource: "asset:///images/typeB.png"
                },
                ImagePaintDefinition {
                    id: background_typeC
                    imageSource: "asset:///images/typeC.png"
                },
                ImagePaintDefinition {
                    id: background_typeD
                    imageSource: "asset:///images/typeD.png"
                },
                ImagePaintDefinition {
                    id: background_typeE
                    imageSource: "asset:///images/typeE.png"
                }
            ]

            onCreationCompleted: {
                dataModel.insert({
                        "position": 0,
                        "unit": "typeA",
                        "background": background_typeA.imagePaint,
                        "selected_value_number" : -1
                    });
                dataModel.insert({
                        "position": 1,
                        "unit": "typeB",
                        "background": background_typeB.imagePaint,
                        "selected_value_number" : -1
                    });
                dataModel.insert({
                        "position": 2,
                        "unit": "typeC",
                        "background": background_typeC.imagePaint,
                        "selected_value_number" : -1
                    });
                dataModel.insert({
                        "position": 3,
                        "unit": "typeD",
                        "background": background_typeD.imagePaint,
                        "selected_value_number" : -1
                    });
                dataModel.insert({
                        "position": 4,
                        "unit": "typeE",
                        "background": background_typeE.imagePaint,
                        "selected_value_number" : -1
                    });
            }

            function itemType(data, indexPath) {
                return "unit_list";
            }
        }
    }
}

 QuantitySelectList.qml

import bb.cascades 1.0

Container {
    id: quantity_container

    maxHeight: 300
    maxWidth: 300

    background: ListItemData.background

    ListView {
        id: quantity_list

        maxHeight: 300
        maxWidth: 300
        
        signal updateQuantity(variant quantity_index_path)

        layoutProperties: StackLayoutProperties {
            spaceQuota: 1
        }

        dataModel: GroupDataModel {
            grouping: ItemGrouping.None
            sortingKeys: [ "position" ]
            objectName: "quantity_select_set"
        }

        snapMode: SnapMode.LeadingEdge
        
        attachedObjects: [
            // This handler is tracking the scroll state of the inner ListView.
            ListScrollStateHandler {
                onScrollingChanged: {
                    if (! scrolling) {
                        if (firstVisibleItem != undefined) {
                            
                            var new_position = firstVisibleItem[0];
                            
                            console.log("Selected Position: " + new_position);
                            
                            var data_object = quantity_container.ListItem.data;
                            data_object.selected_value_number = new_position;
                            
                            quantity_container.ListItem.view.dataModel.updateItem(quantity_container.ListItem.indexPath, data_object);
                            
                            console.log("Selected: " + quantity_container.ListItem.data.unit + " " + quantity_container.ListItem.data.selected_value_number);
                        }
                    }
                }
            }
        ]
        
        listItemComponents: [
            ListItemComponent {
                type: "quantity"
                Container {
                    id: quantity_view

                    minHeight: 300
                    minWidth: 300
                    
                    attachedObjects: [
                        TextStyleDefinition {
                            id: quantity_text_style
                            base: SystemDefaults.TextStyles.SubtitleText
                            color: Color.Black
                            fontWeight: FontWeight.Normal
                            fontSize: FontSize.PointValue
                            fontSizeValue: 36.0
                        }
                    ]

                    horizontalAlignment: HorizontalAlignment.Fill
                    verticalAlignment: VerticalAlignment.Fill

					layout: DockLayout { }

                    Label {
                        text: ListItemData.amount
                        horizontalAlignment: HorizontalAlignment.Center
                        verticalAlignment: VerticalAlignment.Center
                        textStyle {
                            base: quantity_text_style.style
                        }
                    }
                }
            }
        ]

        onCreationCompleted: {
            
        }

        function itemType(data, indexPath) {
            return "quantity";
        }
    }
    
    ListItem.onDataChanged: {

        quantity_list.dataModel.clear();

        if (ListItemData.unit == "typeA") {
            for (var a = 1; a < 11; a ++) {
                quantity_list.dataModel.insert({
                        "amount": a,
                        "position": a
                    });
            }
        } else if (ListItemData.unit == "typeB") {
            for (var a = 1; a < 11; a ++) {
                quantity_list.dataModel.insert({
                        "amount": 0.1 * a,
                        "position": a
                    });
            }
        } else if (ListItemData.unit == "typeC") {
            for (var a = 1; a < 16; a ++) {
                quantity_list.dataModel.insert({
                        "amount": a,
                        "position": a
                    });
            }
        } else if (ListItemData.unit == "typeD") {
            for (var a = 1; a < 11; a ++) {
                quantity_list.dataModel.insert({
                        "amount": a,
                        "position": a
                    });
            }
        } else if (ListItemData.unit == "typeE") {
            for (var a = 1; a < 11; a ++) {
                quantity_list.dataModel.insert({
                        "amount": 0.5 * a,
                        "position": a
                    });
            }
        }
    }
}

 Here I have the problem if I scroll to any other than the first value on one of the lists although the data modification seems to work properly.