Enterprise Tumblers Issue- Junk data is seen on backside

[Beemaneni Bala]

Hi Guys,
I have an strange issue with tumblers. i have been working on those for long and i found an issue with my code as i see some junk data on the tumblers backside.I dont know what i am doing wrong.
I have 3 radio buttons and three tumblers on my page.When my 1st tumbler is
loaded i.e., on component completed i am setting radio button 1 to true .
After that i am doing some calculations and loading data into tumblers when
radiobutton is checked. But i am not sure what is that junk data seen behind
the scene.
Please share your thoughts and i am hopeful that i explained my issue clearly

[dheerendra]

Can you paste your sample code here ? It helps the check it quickly.

[Beemaneni Bala]

//your code here


    Row {
        id: topArrowImageRow
        anchors{left: setpointName.right ;leftMargin: 140;top:parent.top;topMargin: 40 }
        spacing: 110

        Image{
            id: downArrow1
            source: setpointEditsobj.downArrow1source
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    if(rbtn1.checked)
                       setPointTumbler1.setCurrentIndexAt(0,column1.currentIndex+1)
                    else if(rbtn2.checked)
                       warmPointTumbler1.setCurrentIndexAt(0,column12.currentIndex+1)
                    else if(rbtn3.checked)
                       coldPointTumbler1.setCurrentIndexAt(0,column13.currentIndex+1)
                }
            }
        }

        Image{
            id: downArrow2
            source: setpointEditsobj.downArrow2source
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    if(rbtn1.checked)
                       setPointTumbler2.setCurrentIndexAt(0,column2.currentIndex+1)
                    else if(rbtn2.checked)
                       warmPointTumbler2.setCurrentIndexAt(0,column22.currentIndex+1)
                    else if(rbtn3.checked)
                       coldPointTumbler2.setCurrentIndexAt(0,column23.currentIndex+1)
                }
            }
        }
    }

    Row {
        id: setPointRow
        anchors{left:  setpointName.right ;leftMargin: 75;top: topArrowImageRow.bottom;topMargin: 40 }
        spacing: 1

        Tumbler {
            id: setPointTumbler1
            height: setpointEditsobj.tumblerheight
            clip: true

            TumblerColumn {
                id: column1
                width: 120
                model: /*setpointTumblerModel1*/[0,1,2,3,4,5]
                onCurrentIndexChanged: {
                   console.log("Set point tumbler index changed: "+rbtn1.checked + ":  "+rbtn2.checked + ": "+rbtn3.checked)
                    if(rbtn1.checked){
                        console.log("Setpoint Radio Button Checked: "+setpointTumblerModel1.count)
                        setpointTumblerModel2.clear()
                        if(tempSetPoint<0){
                            if(setpointTumblerModel1.get(column1.currentIndex).data === Math.ceil(minSetPointLimit/10))
                            {
                                for(var i=0;i<=Math.abs(minSetPointLimit%10);i++)
                                {
                                    setpointTumblerModel2.append({data: i})
                                }
                            }
                            else if(setpointTumblerModel1.get(column1.currentIndex).data === Math.ceil(maxSetPointLimit/10))
                            {
                                for(var j=Math.abs(maxSetPointLimit%10);j<=9;j++)
                                {
                                    setpointTumblerModel2.append({data: j})
                                }
                            }
                            else
                            {
                                for(var k=0;k<=9;k++)
                                {
                                    setpointTumblerModel2.append({data: k})
                                }
                            }
                            if(setPtChange===0){
                                setPtChange++
                                var cur_point =tempSetPoint
                                var onesValue = Math.abs(cur_point) % 10
                                setPointTumbler2.setCurrentIndexAt(0,onesValue)
                            }
                        }
                        col1=setpointTumblerModel1.get(currentIndex).data
                        col2=setpointTumblerModel2.get(currentIndex).data
                    }
                }
            }

            style: TumblerStyle {
                padding.top: -20
                padding.bottom: -20
                property Component frame: compFrame
                property Component foreground: Item {}
                delegate: tumblerDelegate
            }

            Component.onCompleted: {
                if(parentRegion.appSettings.setpointsActive===0){
                    rbtn1.checked=true
                }
                else if(parentRegion.appSettings.setpointsActive===1) {
                    rbtn2.checked=true
                }
                else if(parentRegion.appSettings.setpointsActive===2){
                    rbtn3.checked=true
                }
            }
        }

        Tumbler {
            id: setPointTumbler2
            clip: true
            height: setpointEditsobj.tumblerheight
            visible: setPointRow.visible

            TumblerColumn {
                id: column2
                width: 120
                model: setpointTumblerModel2
            }
            style: TumblerStyle {

                padding.top: -20
                padding.bottom: -20
                property Component frame: compFrame
                property Component foreground: Item {}
                delegate: tumblerDelegate
            }
        }
    }

    Row {
        id: warmPointRow
        anchors{left:  setpointName.right ;leftMargin: 75;top: topArrowImageRow.bottom;topMargin: 40 }
        spacing: 1


        Tumbler {
            id: warmPointTumbler1
            height: setpointEditsobj.tumblerheight
            clip: true

            TumblerColumn {
                id: column12
                width: 120
                model: warmPointTumblerModel1
                onCurrentIndexChanged: {
                    console.log("Warm point tumbler index changed")
                        if(rbtn2.checked){
                            warmPointTumblerModel2.clear()
                            console.log("Warm point Radio Button Checked: "+warmPointTumblerModel1.count)
                            if(warmSetPoint<0){
                                if(warmPointTumblerModel1.get(column12.currentIndex).data === Math.ceil(minWarmPointLimit/10))
                                {
                                    for(var i1=0;i1<=Math.abs(minWarmPointLimit%10);i1++)
                                    {
                                        warmPointTumblerModel2.append({data: i1})
                                    }
                                }
                                else if(warmPointTumblerModel1.get(column12.currentIndex).data === Math.ceil(maxWarmPointLimit/10))
                                {
                                    for(var j1=Math.abs(maxWarmPointLimit%10);j1<=9;j1++)
                                    {
                                        warmPointTumblerModel2.append({data: j1})
                                    }
                                }
                                else
                                {
                                    for(var k1=0;k1<=9;k1++)
                                    {
                                        warmPointTumblerModel2.append({data: k1})
                                    }
                                }
                                if(warmPtChange===0){
                                    warmPtChange++
                                    var cur_point1 =warmSetPoint
                                    var onesValue1 = Math.abs(cur_point1) % 10
                                    warmPointTumbler2.setCurrentIndexAt(0,onesValue1)
                                }
                            }
                        }
                }
            }

            style: TumblerStyle {
                padding.top: -20
                padding.bottom: -20
                property Component frame: compFrame
                property Component foreground: Item {}
                delegate: tumblerDelegate
            }
        }

        Tumbler {
            id: warmPointTumbler2
            clip: true
            height: setpointEditsobj.tumblerheight
            visible: warmPointRow.visible

            TumblerColumn {
                id: column22
                width: 120
                model: warmPointTumblerModel2
            }
            style: TumblerStyle {

                padding.top: -20
                padding.bottom: -20
                property Component frame: compFrame
                property Component foreground: Item {}
                delegate: tumblerDelegate
            }
        }
    }

    Row {
        id: coldPointRow
        anchors{left:  setpointName.right ;leftMargin: 75;top: topArrowImageRow.bottom;topMargin: 40 }
        spacing: 1

        Tumbler {
            id: coldPointTumbler1
            height: setpointEditsobj.tumblerheight
            clip: true

            TumblerColumn {
                id: column13
                width: 120
                model: coldPointTumblerModel1
                onCurrentIndexChanged: {
                    console.log("Cold point tumbler index changed")
                        if(rbtn3.checked){
                            coldPointTumblerModel2.clear()
                            console.log("Cold Point radio  button checked: "+coldPointTumblerModel1.count)
                            if(coldSetPoint<0){
                                if(coldPointTumblerModel1.get(column13.currentIndex).data === Math.ceil(minColdPointLimit/10))
                                {
                                    for(var i11=0;i11<=Math.abs(minColdPointLimit%10);i11++)
                                    {
                                        coldPointTumblerModel2.append({data: i11})
                                    }
                                }
                                else if(coldPointTumblerModel1.get(column13.currentIndex).data === Math.ceil(maxColdPointLimit/10))
                                {
                                    for(var j11=Math.abs(maxColdPointLimit%10);j11<=9;j11++)
                                    {
                                        coldPointTumblerModel2.append({data: j11})
                                    }
                                }
                                else
                                {
                                    for(var k11=0;k11<=9;k11++)
                                    {
                                        coldPointTumblerModel2.append({data: k11})
                                    }
                                }
                                if(coldPtChange===0){
                                    coldPtChange++
                                    var cur_point2 =coldSetPoint
                                    var onesValue2 = Math.abs(cur_point2) % 10
                                    coldPointTumbler2.setCurrentIndexAt(0,onesValue2)
                                }
                            }
                        }
                }
            }

            style: TumblerStyle {
                padding.top: -20
                padding.bottom: -20
                property Component frame: compFrame
                property Component foreground: Item {}
                delegate: tumblerDelegate
            }
        }

        Tumbler {
            id: coldPointTumbler2
            clip: true
            height: setpointEditsobj.tumblerheight
            visible: coldPointRow.visible

            TumblerColumn {
                id: column23
                width: 120
                model: coldPointTumblerModel2
            }
            style: TumblerStyle {

                padding.top: -20
                padding.bottom: -20
                property Component frame: compFrame
                property Component foreground: Item {}
                delegate: tumblerDelegate
            }
        }
    }




    Row {
        id: bottomArrowImageRow
        anchors{left:  setpointName.right ;leftMargin: 140;top: rbtn1.checked ? setPointRow.bottom : rbtn2.checked ? warmPointRow.bottom : coldPointRow.bottom;topMargin: 40}
        spacing: 110

        Image{
            id: downArrow4
            source: setpointEditsobj.downArrow4source
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    if(rbtn1.checked)
                       setPointTumbler1.setCurrentIndexAt(0,column1.currentIndex-1)
                    else if(rbtn2.checked)
                       warmPointTumbler1.setCurrentIndexAt(0,column12.currentIndex-1)
                    else if(rbtn3.checked)
                       coldPointTumbler1.setCurrentIndexAt(0,column13.currentIndex-1)
                }
            }
        }

        Image{
            id: downArrow5
            source: setpointEditsobj.downArrow5source
            MouseArea{
                anchors.fill: parent
                onClicked: {
                    if(rbtn1.checked)
                       setPointTumbler2.setCurrentIndexAt(0,column2.currentIndex-1)
                    else if(rbtn2.checked)
                       warmPointTumbler2.setCurrentIndexAt(0,column22.currentIndex-1)
                    else if(rbtn3.checked)
                       coldPointTumbler2.setCurrentIndexAt(0,column23.currentIndex-1)
                }
            }
        }
    }


    Item {
        id: setpointName
        anchors{left: parent.left;leftMargin: 110;top: parent.top;topMargin: 100}
        width: 300
        height: textName1.contentHeight
        RadioButton{
            id: rbtn1
            text: qsTr("Setpoint")
            width: 180
            fontColor: "#344550"
            fontWeight: Font.Normal
            exclusiveGroup: mutualGroup
            onCheckedChanged: {
                if(checked){
                    console.log("Radio Button 1 Checked")
                    setPointRow.visible=true
                    warmPointRow.visible=false
                    coldPointRow.visible=false
                    var cur_point =tempSetPoint
                    var isCurValNegative = cur_point < 0 ? true : false

                    if(isCurValNegative){
                        setpointTumblerModel1.clear()
                        for(var s= Math.ceil(minSetPointLimit/10);s<= Math.ceil(maxSetPointLimit/10);s++) {
                            setpointTumblerModel1.append({data: s})
                        }
                        setpointTumblerModel2.clear()
                        if(Math.ceil(cur_point/10) ===  Math.ceil(minSetPointLimit/10)){
                            for(var i=0;i<=Math.abs(minSetPointLimit%10);i++)
                            {
                                setpointTumblerModel2.append({data: i})
                            }
                        }
                        else if(Math.ceil(cur_point/10) === Math.ceil(maxSetPointLimit/10)){
                            for(var j=Math.abs(maxSetPointLimit%10);j<=9;j++)
                            {
                                setpointTumblerModel2.append({data: j})
                            }
                        }
                        else {
                            for(var k=0;k<=9;k++)
                            {
                                setpointTumblerModel2.append({data: k})
                            }
                        }
                        ones = Math.abs(cur_point) % 10            //8
                        tens =  Math.ceil(cur_point/ 10)
                        if(isCurValNegative){
                            temp = Math.abs(Math.ceil(minSetPointLimit/10))
                            console.log("Cocokckcoccocjoccjo: "+setpointTumblerModel1.count)
                            setPointTumbler1.setCurrentIndexAt(0, (tens+temp))
                        }
                        else{
                            setPointTumbler1.setCurrentIndexAt(0, 0)
                        }
                        setPointTumbler2.setCurrentIndexAt(0,ones)
                    }
                    else
                    {
                        setpointTumblerModel1.clear()
                        setpointTumblerModel2.clear()
                        for(var ss= 0;ss<= 9;ss++) {
                            setpointTumblerModel1.append({data: ss})
                            setpointTumblerModel2.append({data: ss})
                        }
                    }
                }
            }
        }
        Text {
            id: textName1
            anchors{left: rbtn1.right;leftMargin: 30}
            anchors.verticalCenter: rbtn1.verticalCenter
            text: stringSetPointVal + "°C"
            font.pixelSize: 26
            font.family: appStyle.font.familyRegular
            color: "#344550"
        }
    }
    Item {
        id: warmAlarmName
        anchors{left: parent.left;leftMargin: 110;top: setpointName.bottom;topMargin: 38}
        width: 300
        height: textName2.contentHeight
        RadioButton{
            id: rbtn2
            text: qsTr("Warm Alarm")
            width: 180
            fontColor: "#344550"
            fontWeight: Font.Normal
            exclusiveGroup: mutualGroup
            onCheckedChanged: {
                if(checked){
                    setPointRow.visible=false
                    coldPointRow.visible=false
                    warmPointRow.visible=true
                    console.log("Radio Button 2 Checked")
                    var cur_point = warmSetPoint
                    var isCurValNegative = cur_point < 0 ? true : false
                    if(isCurValNegative){
                        warmPointTumblerModel1.clear()
                        for(var s= Math.ceil(minWarmPointLimit/10);s<= Math.ceil(maxWarmPointLimit/10);s++)
                        {
                            warmPointTumblerModel1.append({data: s})
                        }
                        warmPointTumblerModel2.clear()
                        if(warmPointTumblerModel1.get(0).data === Math.ceil(minWarmPointLimit/10) )
                        {
                            for(var i=0;i<=Math.abs(minWarmPointLimit%10);i++)
                            {
                                warmPointTumblerModel2.append({data: i})
                            }
                        }
                        else if(warmPointTumblerModel1.get(0).data === Math.ceil(maxWarmPointLimit/10) )
                        {
                            for(var j=Math.abs(maxWarmPointLimit%10);j<=9;j++)
                            {
                                warmPointTumblerModel2.append({data: j})
                            }
                        }
                        else
                        {
                            for(var k=0;k<=9;k++)
                            {
                                warmPointTumblerModel2.append({data: k})
                            }
                        }

                        ones = Math.abs(cur_point) % 10
                        tens = (isCurValNegative  ? Math.ceil(cur_point/ 10) : Math.floor(cur_point/10))

                        if(isCurValNegative){
                            temp = Math.abs(Math.ceil(minWarmPointLimit/10))
                            console.log("Cocokckcoccocjoccjo: "+warmPointTumblerModel1.count)
                            warmPointTumbler1.setCurrentIndexAt(0, tens+temp)
                        }
                        else{
                            temp = Math.abs(Math.ceil(maxWarmPointLimit/10))
                            warmPointTumbler1.setCurrentIndexAt(0, 0)
                        }
                        warmPointTumbler2.setCurrentIndexAt(0,ones)
                    }
                    else
                    {
                        warmPointTumblerModel1.clear()
                        warmPointTumblerModel2.clear()
                        for(var ss= 0;ss<= 9;ss++) {
                            warmPointTumblerModel1.append({data: ss})
                            warmPointTumblerModel2.append({data: ss})
                        }
                    }
                }
            }
        }
        Text {
            id: textName2
            anchors{left: rbtn2.right;leftMargin: 30}
            anchors.verticalCenter: rbtn2.verticalCenter
            text: stringWarmSetPointVal + "°C"
            font.pixelSize: 26
            font.family: appStyle.font.familyRegular
            color: "#344550"
        }
    }
    Item {
        id: coldAlarmName
        anchors{left: parent.left;leftMargin: 110;top: warmAlarmName.bottom;topMargin: 38}
        width: 300
        height: textName3.contentHeight
        RadioButton{
            id: rbtn3
            text: qsTr("Cold Alarm")
            fontColor: "#344550"
            fontWeight: Font.Normal
            width: 180
            exclusiveGroup: mutualGroup
            onCheckedChanged: {
                if(checked){
                    setPointRow.visible=false
                    warmPointRow.visible=false
                    coldPointRow.visible=true
                    console.log("Radio Button 3 Checked")
                    var cur_point = coldSetPoint
                    var isCurValNegative = cur_point < 0 ? true : false
                    if(isCurValNegative){
                        coldPointTumblerModel1.clear()
                        for(var s= Math.ceil(minColdPointLimit/10);s<= Math.ceil(maxColdPointLimit/10);s++)
                        {
                            coldPointTumblerModel1.append({data: s})
                        }
                        coldPointTumblerModel2.clear()
                        if(coldPointTumblerModel1.get(0).data === Math.ceil(minColdPointLimit/10))
                        {
                            for(var i=0;i<=Math.abs(minColdPointLimit%10);i++)
                            {
                                coldPointTumblerModel2.append({data: i})
                            }
                        }
                        else if(coldPointTumblerModel1.get(0).data === Math.ceil(maxColdPointLimit/10))
                        {
                            for(var j=Math.abs(maxColdPointLimit%10);j<=9;j++)
                            {
                                coldPointTumblerModel2.append({data: j})
                            }
                        }
                        else
                        {
                            for(var k=0;k<=9;k++)
                            {
                                coldPointTumblerModel2.append({data: k})
                            }
                        }

                        ones = Math.abs(cur_point) % 10
                        tens = (isCurValNegative  ? Math.ceil(cur_point/ 10) : Math.floor(cur_point/10))
                        if(isCurValNegative){
                            temp = Math.abs(Math.ceil(minColdPointLimit/10))
                            console.log("Cocokckcoccocjoccjo: "+coldPointTumblerModel1.count)
                            coldPointTumbler1.setCurrentIndexAt(0, tens+temp)
                        }
                        else{
                            temp = Math.abs(Math.ceil(minColdPointLimit/10))
                            coldPointTumbler1.setCurrentIndexAt(0, tens+temp-1)
                        }
                        coldPointTumbler2.setCurrentIndexAt(0,ones)
                    }
                    else
                    {
                        coldPointTumblerModel1.clear()
                        coldPointTumblerModel2.clear()
                        for(var ss= 0;ss<= 9;ss++) {
                            coldPointTumblerModel1.append({data: ss})
                            coldPointTumblerModel2.append({data: ss})
                        }
                    }
                }
            }
        }
        Text {
            id: textName3
            anchors{left: rbtn3.right;leftMargin: 30}
            anchors.verticalCenter: rbtn3.verticalCenter
            text: stringColdSetPointVal + "°C"
            font.pixelSize: 26
            color: "#344550"
            font.family: appStyle.font.familyRegular
        }
    }

Pls check out this

[Beemaneni Bala]

Hi ,
I understood the reason of odd behaviour.It is, when i do clear the model or update the model it happens.Its because as soon as i clear model , index gets changed and it gives me "undefined data" error. so it stops when error occurs. But without clearing data, i cannot create a new column of data . So is there any other option that i want to delay current Index changed signal to stop emit until i update a model.

Regards
Bala B