Swaping Listview positions in BB 10 Cascades

Question

I have read an article here that http://bbcascadescode.tumblr.com/post/51115772119/swap-function-in-containers, we can swap the container components.I followed the same procedure and it is working for me. When i Applied the same procedure for Costume Listview ,I am getting "ReferenceError: Can't find variable: tadawulList" on console.

Container {
                    id:trade
                    layout: StackLayout {
                        orientation: LayoutOrientation.LeftToRight
                    }
                    topMargin: 10

                    ListView {
                        id: tradeList
                        objectName: "tradeList"
                        dataModel: _app.dataModel
                        visible: true;

                        listItemComponents: [
                            ListItemComponent {
                                type: "header"
                                Header {
                                    title: {
                                        ListItemData
                                    }
                                }
                            },

                            // The tradeList Item
                            ListItemComponent {
                                type: "item"


                                Container {
                                    id:tadawulList
                                    leftPadding: 15.0
                                    rightPadding: 15.0

                                    background: Color.create("#1a1a1a")
                                    preferredHeight: 80.0
                                    topMargin: 6
                                    layout: StackLayout {
                                        orientation: LayoutOrientation.LeftToRight
                                    }

                                    Label {
                                        id: symbol
                                        text: ListItemData.Symbol_En
                                        //text: ListItemData.Symbol_En.length()>20?Symbol_En.subString(0,15): Symbol_En

                                        // Text Style and size etc
                                        textStyle.base: SystemDefaults.TextStyles.SubtitleText
                                        textStyle.fontSizeValue: 5.0
                                        layoutProperties: StackLayoutProperties {
                                            spaceQuota: 3.0
                                        }
                                        verticalAlignment: VerticalAlignment.Center
                                        horizontalAlignment: HorizontalAlignment.Center
                                        textStyle.color: Color.White
                                        textStyle.fontWeight: FontWeight.Bold
                                        textStyle.fontSize: FontSize.PointValue
                                       // multiline: true

                                    }

                                    Container {
                                        id: tadawulchange1
                                        layout: StackLayout {

                                        }

                                        layoutProperties: StackLayoutProperties {
                                            spaceQuota: 2.0

                                        }

                                      //  ListItemData.PerChange.length == 1 ? Color.create("#1a1a1a") :Color.DarkRed

                                      // background: ListItemData.PerChange.indexOf('-') < 0 ?((ListItemData.PerChange.length() == 1) ? Color.create("#1a1a1a") : Color.create("#ff105900")) : ((ListItemData.PerChange.length() == 1) ? Color.create("#1a1a1a") : Color.DarkRed)

                                        background: (ListItemData.PerChange.indexOf('-') < 0 )?((ListItemData.PerChange.indexOf('0.00') <0 ?  Color.create("#ff105900"): Color.create("#1a1a1a"))): ((ListItemData.PerChange.indexOf('0.00') < 0 ?  Color.DarkRed: Color.create("#1a1a1a")))

                                        verticalAlignment: VerticalAlignment.Center
                                        preferredHeight: 20.0
                                        Label {

                                            id: change
                                            text: ListItemData.PerChange
                                           // textStyle.color: ListItemData.PerChange.indexOf('-') < 0 ? Color.Green : Color.Red //here
                                            textStyle.base: SystemDefaults.TextStyles.SubtitleText
                                            textStyle.fontSizeValue: 30.0
                                            layoutProperties: StackLayoutProperties {
                                                spaceQuota: 2
                                            }
                                            verticalAlignment: VerticalAlignment.Center
                                            horizontalAlignment: HorizontalAlignment.Center
                                            preferredHeight: 0.0

                                        }

                                    }

                                    Label {
                                        id: ltp
                                        text: ListItemData.LTP
                                        textStyle.base: SystemDefaults.TextStyles.SubtitleText
                                        textStyle.fontSizeValue: 30.0
                                        layoutProperties: StackLayoutProperties {
                                            spaceQuota: 1
                                        }
                                        verticalAlignment: VerticalAlignment.Center
                                        horizontalAlignment: HorizontalAlignment.Center
                                        textStyle.color: Color.White
                                        textStyle.fontWeight: FontWeight.Default
                                    }
                                    Label {
                                        id: highValue
                                        text: ListItemData.High
                                        textStyle.base: SystemDefaults.TextStyles.SubtitleText
                                        textStyle.fontSizeValue: 30.0
                                        layoutProperties: StackLayoutProperties {
                                            spaceQuota: 1
                                        }
                                        verticalAlignment: VerticalAlignment.Center
                                        horizontalAlignment: HorizontalAlignment.Center
                                        textStyle.color: Color.White
                                        textStyle.fontWeight: FontWeight.Default
                                    }
                                    Label {
                                        id: lowValue
                                        text: ListItemData.Low
                                        textStyle.base: SystemDefaults.TextStyles.SubtitleText
                                        textStyle.fontSizeValue: 30.0
                                        layoutProperties: StackLayoutProperties {
                                            spaceQuota: 1
                                        }
                                        verticalAlignment: VerticalAlignment.Center
                                        horizontalAlignment: HorizontalAlignment.Center
                                        textStyle.color: Color.White
                                        textStyle.fontWeight: FontWeight.Default
                                    }
                                }
                            }
                        ]
                        onTriggered: {
                            var selectedItem = dataModel.data(indexPath);
                            lightTimer.stop();
                            _app.dropSymbols(1); // Drop Req for Tadawul

                            _app.loadQuickWatch(selectedItem.symbol_ID);

                        }
                        onVisibleChanged: {
                            myIndicator.stop();
                            loader.visible = false
                            loadText.visible=false
                        }
                    }
                    }

and myButton Click is as follows:

                      Button {
                        horizontalAlignment: HorizontalAlignment.Right

                        imageSource: "asset:///images/search_icon.png"
                        preferredWidth: 10.0
                        preferredHeight: 10.0
                        layoutProperties: StackLayoutProperties {
                            spaceQuota: 1.0
                        }
                        onClicked: {                           
                            tadawulList.swap(0, 4);
                            tadawulList.swap(1, 3);
                        }
                    }

Please Guide me,

Thanks!!!

Where is your button? it must be inside **ListItemComponent**.. — Niranj Patel, Sep 24 '13 at 06:00
It is in outside the ListItemComponent(other Container),Is there any other way to achieve this? I need to swap when a button(other Container) is Cliecked. — Sharath, Sep 24 '13 at 08:24
you mean you have to swap whole row of listview from zero to four? — Niranj Patel, Sep 24 '13 at 09:42
suppose I have list-view with 5 rows (with in tadawulList container).one row is like 1 2 3 4. now i need to swap elements 1 and 4.(As all rows belong to same container,It will automatically swaps other four rows also) — Sharath, Sep 24 '13 at 09:53
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/37931/discussion-between-sharath-and-capdroid) — Sharath, Sep 24 '13 at 09:59
It is not possible with swap function you have to change order of data in model and again you have to load model in listview.. — Niranj Patel, Sep 24 '13 at 10:20
currently order is like... ListItemData.Symbol_En, ListItemData.PerChange,ListItemData.LTP,ListItemData.High and ListItemData.Low for symbol,perchange,ltp.high and low Labels respectively. now how cal i change the order — Sharath, Sep 24 '13 at 10:46

Niranj Patel · Accepted Answer · 2013-09-24T12:15:11.617

It is not possible with swap function. but you can change layout orientation or else.

Here is sample code of how change layout orientation with condition...

Container {
                property bool isLeft:false
                ListView {
                    id: tradeList
                    objectName: "tradeList"
                    dataModel: _app.dataModel
                    visible: true
                    function getCurrentDirection(){
                        return isLeft;
                    }
                    listItemComponents: [
                        ListItemComponent {
                            type: "header"
                            Header {
                                title: {
                                    ListItemData
                                }
                            }
                        },
                        // The tradeList Item
                        ListItemComponent {
                            type: "item"
                            Container {
                                id: tadawulList
                                layout: StackLayout {
                                // Here is I Changed layout orientation according to value 
                                    orientation: tadawulList.ListItem.view.getCurrentDirection()==true ? LayoutOrientation.LeftToRight : LayoutOrientation.RightToLeft
                                }
                                // Your more UI here
                            }
                        }
                    ]
                }
                Button {
                    onClicked: {
                        isLeft = !isLeft
                        //Refresh your listview here
                    }
                }
            }

Swaping Listview positions in BB 10 Cascades

1 Answers1