Table column cell with button image (SOLVED)



  • 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?



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



  • 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;
                }
            }
          }
        }


  • @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.



  • 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.



  • @Vicky-Sharma So, your problem is solved?



  • 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;
                    }
                }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.