ListView not getting updated in blackberry cascades qml

Question

I have a list view whose data I receive from an api call say in the order

1

2

3

4

5

After I click on one item say 3, I make the api call that gives the data in the order

3

1

2

4

5

and I need to display the same. But my list view currently populates like

3

1

3

4

5

I checked the log that displays the listview item data and it prints in the correct order

ListView {
              id: contactListView
              dataModel: contactsData

              listItemComponents: [
                        ListItemComponent 
                          {
                            id: homeListComponent
                            type: "item"
                            CustomListItemHomePage
                             {

                                id: listCell
                                background: ListItemData.colors
                                text:  ListItemData.name;

                               onClicked: {

                                       listCell.ListItem.view.fetchListFromLV();

                                          }

                                }
                           }

                    ]

 function fetchListFromLV()
               {
                       //some codes that makes the api call here

               }
}

 attachedObjects: [
  GroupDataModel {
                    id: contactsData
                    sortingKeys: [ "last" ]
                    grouping: ItemGrouping.None

                },
 Communication {
                    id: requestPost
                    onComplete: {

            //gets the api call response here

             var response = JSON.parse(info);
              console.log(response);

          if (response.hasOwnProperty('contacts')) 
                 {
                            contactsData.clear();
                          //contactListView.dataModelChanged(contactsData);
                            var contacts = response["contacts"];

        for (var cntNames in contacts) 
                           {

                                contactsData.insert({
                                        name: contacts[cntNames].toString(),
                                        last: contactsData.size(),
                                        colors: setBgColor(contactsData.size())
                                    })


                            }
                  }
                 //This log prints data in correct order i.e 3 1 2 4 5 but the data displayed in list view prints in wrong order 3 1 3 4 5  
                for (var i=0;i<contactsData.size();i++)
                                        {
                                            console.log(contactsData.data([i]).name);
                                        }
           }
]

Which DataModel are you using? If you have GroupDataModel check sortingKeys, because that might change the order. — Bojan Kogoj
Its groupdatamodel, even if it changes the order how does the item repeats? Can you check my code that I pasted above and tell me what am I doing wrong? — Francis F
Your code makes little sense. Why do you use last at all? Remove it from GroupDataModel — Bojan Kogoj
I'm using last to sort in the order of added contacts, in my application these are sample names and I dont want to order them alphabetically but in the order they actually arrive, also at the end there is a + button to add users, which adds user to bottom and not at the top. — Francis F

rahul baraiya rahul baraiya · Accepted Answer · 2015-02-07T12:23:44

**Follow This Code**

import bb.cascades 1.2

Page {
    onCreationCompleted: {
        fillGroupDataModel()
    }
    Container {
        ListView {
            id: contactListView
            dataModel: contactsData

            listItemComponents: [
                ListItemComponent {
                    id: homeListComponent
                    type: "item"
                    Container {
                        horizontalAlignment: HorizontalAlignment.Fill
                        verticalAlignment: VerticalAlignment.Fill
                        background: ListItemData.color_default_bg
                        Container {
                            horizontalAlignment: HorizontalAlignment.Fill
                            verticalAlignment: VerticalAlignment.Center
                            topPadding: 10
                            bottomPadding: 10
                            leftPadding: 10
                            rightPadding: 10
                            layout: StackLayout {
                                orientation: LayoutOrientation.LeftToRight
                            }
                            Label {
                                id: mLableColorId
                                text: ListItemData.color_id
                                verticalAlignment: VerticalAlignment.Center
                            }
                            Label {
                                id: mLableColorName
                                text: ListItemData.color_name
                                verticalAlignment: VerticalAlignment.Center
                            }
                        }
                        Divider {
                            horizontalAlignment: HorizontalAlignment.Fill
                        }

                    }
                }

            ]
            onTriggered: {
                var selectedItem = dataModel.data(indexPath);
                var selectedColor = selectedItem.color_code
                var count = contactListView.dataModel.childCount(0)
                for (var i = 0; i < count; i ++) {
                    var tempImdexPath = [ i ]
                    var selectedItem = dataModel.data(tempImdexPath);
                    selectedItem.color_default_bg = selectedColor
                    contactListView.dataModel.updateItem(tempImdexPath, selectedItem);
                }
            }

        }

    }
    function fillGroupDataModel() {
        contactsData.clear()
        contactsData.insert({
                "color_id": 1,
                "color_code": Color.Blue,
                "color_name": "Blue",
                "color_default_bg": Color.White
            });
        contactsData.insert({
                "color_id": 2,
                "color_code": Color.Green,
                "color_name": "Grean",
                "color_default_bg": Color.White
            });

        contactsData.insert({
                "color_id": 3,
                "color_code": Color.Red,
                "color_name": "Red",
                "color_default_bg": Color.White
            });
        contactsData.insert({
                "color_id": 4,
                "color_code": Color.Gray,
                "color_name": "Gray",
                "color_default_bg": Color.White
            });
        contactsData.insert({
                "color_id": 5,
                "color_code": Color.Cyan,
                "color_name": "Cyan",
                "color_default_bg": Color.White
            });
    }
    attachedObjects: [
        GroupDataModel {
            id: contactsData
            sortingKeys: [ "color_id" ]
            sortedAscending: true
            grouping: ItemGrouping.None

        }

    ]
}

ListView not getting updated in blackberry cascades qml

1 Answers