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