Pictures in weblistbox cells

It is real nice to see it implemented. That will be a lot simpler. Thank you.

As usual Greg . . . I’m gonna ask for something: a way for the image to completely fill the cell.

Background image can be made 100% in CSS only in some browsers, and most annoying is that is not supported in Internet Explorer.

It is not that difficult to resize images in Xojo to fill the cells.

Make the picture big enough on the server?

My row has a minimum height of 12 pixels and the picture has a height of 26. The row expands to something bigger than the picture. I tried a style with 0 padding, but that didn’t work.

Yup. Cells have built-in padding, and the picture is inserted in-line.

Great to hear this.

Anybody can share sample on how they did it? I’m having trouble following guidance. here.

It’s just lstbox.cellPicture(i,j) = name Of Image

Is it possible from rs or from a physical file local file?

Just the same as what you would do with an ImageView.

Thanks Michel and to everybody!

This looks like long an old thread that was revived lately.
I’m trying to display an image inside a weblistbox cell.
I’m running 2016 R2.1
I’m trying to use CellPicture but it says the method doesn’t exist.

This is what I managed to summarize from this long thread.
A version after my current version of Xojo a new method was added called CellPicture.
However prior to that people used java script to set the cell background image using css.

[code]Sub CellPicture(extends WebListBox as ctrl, row as integer, column as integer, Assigns value as WebPicture)
dim st() As String

st.append(“var tbody = document.getElementById('” + ctrl.controlID + “').getElementsByTagName(‘table’)[1].getElementsByTagName(‘tbody’)[0];”)
st.append(“var cell = tbody.getElementsByTagName(‘tr’)[”+str(row)+“].getElementsByTagName(‘td’)[”+str(column)+“];”)
st.append(“if (cell) {”)
st.append(“cell.style.backgroundImage=”“url(‘http://www.w3schools.com/css/bgdesert.jpg’)”“;”)
st.append(“}”)

ExecuteJavaScript(Join(st))
End Sub[/code]
This is with the URL from WebPicture but it doesn’t work, where as the example above does work.

var tbody = document.getElementById('DACrGjWf').getElementsByTagName('table')[1].getElementsByTagName('tbody')[0]; var cell = tbody.getElementsByTagName('tr')[0].getElementsByTagName('td')[0]; if (cell) { cell.style.backgroundImage="url('/4BC0550DB41D16C2BC133D71DFC193D344A803B9/files/7209-0426-6694-5355-5800/picture.png')"; }

I sub classed WebListBox and added a Dictionary of background pictures.
I added the dictionary property CellBackGrounds to ‘keep’ images in scope.

[code]Sub CellPicture(extends WebListBox as ctrl, row as integer, column as integer, Assigns value as WebPicture)
dim key, st() As String

if value <> nil then

if CellBackGrounds = nil then CellBackGrounds = new Dictionary

key = str(row)+","+str(column)

// Overwrite if it exists ... i guess.
CellBackGrounds.Value(key) = value
//  I keep these because they need to be available when requested...

st.append("var tbody = document.getElementById('" + ctrl.controlID + "').getElementsByTagName('table')[1].getElementsByTagName('tbody')[0];")
st.append("var cell = tbody.getElementsByTagName('tr')["+str(row)+"].getElementsByTagName('td')["+str(column)+"];")
st.append("if (cell) {")
st.append("cell.style.backgroundImage=""url('"  +value.URL+  "')"";")
st.append("}")

ExecuteJavaScript(Join(st))

end if

End Sub[/code]

This works but if the cell is not same size as the image then you wont see the whole thing…
Same goes for if the image is too small for the cell etc etc.

You can use style properties to let browser automatically scale/resize/crop/position the image.
CSS background-size Property