QML table view Image as cell element - qt

Question

I am trying to display Image and Text in a row of QML table view component, I chose itemDelegate to accomplish it, but the result shows as the bold text on each row, and in image column both image and text are displayed. It seems two times the model items are displaying on the table.
Code:
Rectangle{
width:parent.width
height:parent.height
color: "#333333"
id: root
ListModel {
id: live_alertmodel
}
TableView {
// anchors.top: download_bt.bottom
anchors.horizontalCenter: parent.horizontalCenter
width: root.width
height: 100
TableViewColumn {
role: "time"
title: "Time"
width: root.width/4
}
TableViewColumn {
role: "location"
title: "Location"
width: root.width/4
}
TableViewColumn {
role: "alert"
title: "Alert"
width: root.width/4
}
TableViewColumn {
role: "image"
title: "Image"
width: root.width/4
}
model: live_alertmodel
itemDelegate: Item {
Text {
anchors.verticalCenter: parent.verticalCenter
color: styleData.textColor
//elide: styleData.elideMode
text: styleData.value
}
Text {
anchors.verticalCenter: parent.verticalCenter
color: styleData.textColor
//elide: styleData.elideMode
text: styleData.value
}
Text {
anchors.verticalCenter: parent.verticalCenter
color: styleData.textColor
//elide: styleData.elideMode
text: styleData.value
font.bold: false
}
Image {
id: myIcon;
width:root.width/4;
//height:50;
anchors.horizontalCenter: parent.horizontalCenter;
source: styleData.value;
fillMode: Image.PreserveAspectFit
height:20
cache : true;
asynchronous: true;
}
}
Component.onCompleted: {
for(var i=0;i<10;i++)
live_alertmodel.append({ time:"12/15/2015",
location:"location",
alert:"access",
image:"http://images.freeimages.com/images/premium/previews/4852/48521810-globe-icon-flat-icon-with-long-shadow.jpg" })
}
}
}
Also see the screen shot how the out put looks with the above code.
Anything wrong with above code?

Answer 1

I have solved it by
Removing itemDelegate from TableView
Defining delegate item for each TableViewColumn like,
TableViewColumn {
role: "time"
title: "Time"
width: root.width/4
delegate:textDelegate
}
TableViewColumn {
role: "location"
title: "Location"
width: root.width/4
delegate:textDelegate
}
TableViewColumn {
role: "alert"
title: "Alert"
width: root.width/4
delegate:textDelegate
}
TableViewColumn {
role: "image"
title: "Image"
width: root.width/4
delegate:imageDelegate
}
Finally created separate delegate item for text and image column
Component {
id: textDelegate
Item {
id: f_item
height: cell_txt.height
Text {
id: cell_txt
width: parent.width
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
//font.bold: true
text: styleData.value
elide: Text.AlignHCenter
color: "white"
renderType: Text.NativeRendering
}
}
}
Component {
id: imageDelegate
Item {
Image {
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
fillMode: Image.PreserveAspectFit
height:20
cache : true;
asynchronous: true;
source: styleData.value// !== undefined ? styleData.value : ""
}
}
}