Table column cell with button image (SOLVED)

[Vicky Sharma]

Hi to all, i am stuck in QML(Qt-Quick), if someone knows how can resolve below issue will great to me?

I have a table-view with three columns, inside third column i used button with image on every cell of the same, when user pressed it's image source change from red to green that is fine else red.

The problem if i am updating my model on every 1 min so before updating it get to cleared and insert again in model successfully but during this all cell's button again goes red in view which was green, so please let me know how can resolve the same?

[medyakovvit]

@Vicky-Sharma, maybe you could provide more information? What model do you use (C++, qml)? Maybe some code?

[Vicky Sharma]

This my function coming from C++ class containing jsondata

function getData(jsonData)
{
var parse = JSON.parse(jsonData);
var arrayData = parse.data;
myModel.clear();

  for(var i = 0; i < arrayData.length; i++) {
        //in case of direct communication form client mainwindow.cpp class function
      myModel.append({"fileId": arrayData[i].fileId, "fileName": arrayData[i].fileName,
                         "fileRating": arrayData[i].rating,"imagename": "/icons/Icons/likes5.png"});
  }      
}

//================= Table section start from here ==================

 TableView {
    id:table
    anchors.fill: parent
    alternatingRowColors: true
    horizontalScrollBarPolicy: Qt.ScrollBarAsNeeded
    backgroundVisible: true
    anchors.topMargin: parent.height/5
    anchors.bottom: parent.bottom

    TableViewColumn{
        id:filename;
        role: "fileName";
        resizable: false
        movable: false;
        title: "File Name";
        width: table.viewport.width/1.7
    }

    TableViewColumn{
        id:likeBtnColumn;
        role: "playBtn";
        resizable: false;
        movable: false;
        title: "Like ";
        width: table.viewport.width/6;

        delegate: Component {

         Button{
            id:playBtn;
            width: likeBtnColumn.width/3;

            Image {
                id: image

                width: playBtn.width/2
                height: playBtn.height-2
              source: {
                    if(myModel.get(styleData.row).fileId == 1 || myModel.get(styleData.row).fileId == 2 || myModel.get(styleData.row).fileId == 3){
                        image.source = "/icons/Icons/likes5.png";  //this is working with hard-code but not with dynamic like before if loop, for loop can use, THIS IS MY PROBLEM
                    }
                   else{
                       image.source = "/icons/Icons/likes4green.png";
                   }
                }

                fillMode: Image.PreserveAspectFit
                x: playBtn.x + 8;
            }

            style: ButtonStyle{
                background: Rectangle{
                color: "transparent"
                }
            }
            onClicked:{

                var likeBtnPressed = myModel.get(styleData.row).fileId;
                console.log("you pressed : " + likeBtnPressed);
                mainWindowCalling.slotSongsLikes(likeBtnPressed);
                alreadyLiked = likeBtnPressed;
                image.source = "/icons/Icons/likes4green.png" ;
                image.visible = true;
            }
        }
      }
    }

[medyakovvit]

@Vicky-Sharma
The main point is that you need to save model after changes. If i correctly understand, you load model from json every 1 min. So if you not change the value of "imagename" in json, you will receive same value every time.

delegate: Component {

         Button{
            id: playBtn;
            width: likeBtnColumn.width/3;

            Image {
                id: image

                width: playBtn.width/2
                height: playBtn.height-2
                source: imageName // from the model. Is it working?

                fillMode: Image.PreserveAspectFit
                x: playBtn.x + 8;
            }

            style: ButtonStyle{
                background: Rectangle{
                color: "transparent"
                }
            }
            onClicked:{

                var likeBtnPressed = myModel.get(styleData.row).fileId;
                console.log("you pressed : " + likeBtnPressed);
                mainWindowCalling.slotSongsLikes(likeBtnPressed);
                alreadyLiked = likeBtnPressed;
                //image.source = "/icons/Icons/likes4green.png" ;
                imageName = "/icons/Icons/likes4green.png"; // change image in model, not only in view
                // Right now you need to save model, because you change some  data
                image.visible = true;
            }
        }

By the way, if you use only 2 images("/icons/Icons/likes5.png", "/icons/Icons/likes4green.png"), maybe it's better to use bool value in json and model instead of string and load either of them.

[Vicky Sharma]

Sorry for my mistake, json not sending any image source.

function getData(jsonData)
{
  var parse = JSON.parse(jsonData);
  var arrayData = parse.data;
  myModel.clear();

  for(var i = 0; i < arrayData.length; i++) {
        //in case of direct communication form client mainwindow.cpp class function
      myModel.append({"fileId": arrayData[i].fileId, "fileName": arrayData[i].fileName,
                         "fileRating": arrayData[i].rating});
  }      
}

it is created by myself at the time of filling data into model.

[medyakovvit]

@Vicky-Sharma So, your problem is solved?

[Vicky Sharma]

Thanks for reply and i did something different in guidance of my Senior

What i did. i did following

In json, We add another filled "songlikedid" which is coming from database table and than match if database table (Songs, AlreadyLiked) are same than set green.png else blue

function getData(jsonData)
    {
      var parse = JSON.parse(jsonData);
      var arrayData = parse.data;
      myModel.clear();

      for(var i = 0; i < arrayData.length; i++) {
          myModel.append({"fileId": arrayData[i].fileId, "fileName": arrayData[i].fileName,
                             "fileRating": arrayData[i].rating, "songlikedid": arrayData[i].songlikedid});
      }      
    }

 Button{
                id:playBtn;
                width: likeBtnColumn.width/3;

                Image {
                    id: image

                    width: playBtn.width/2
                    height: playBtn.height-2
                    source: {
                        if(myModel.get(styleData.row).songlikedid == myModel.get(styleData.row).fileId ){
                            image.source = "/icons/Icons/likes4green.png";
                        }
                        else{
                            image.source = "/icons/Icons/likes5.png";
                        }
                    }

                    fillMode: Image.PreserveAspectFit
                    x: playBtn.x + 8;
                }

                style: ButtonStyle{
                    background: Rectangle{
                    color: "transparent"
                    }
                }
                onClicked:{

                    var likeBtnPressed = myModel.get(styleData.row).fileId;
                    console.log("you pressed : " + likeBtnPressed);
                    mainWindowCalling.slotSongsLikes(likeBtnPressed);
                    alreadyLiked = likeBtnPressed;
                    image.source = "/icons/Icons/likes4green.png" ;
                    image.visible = true;
                }
            }