Instead of modifying the content of a cell, SetAttribute background-image of that cell.
@Michel Bujardet
That’s what i did on w3schools:
This is what i need made on xojo.
Image is perfect! But when i put the images on listbox, the events do not work anymore
You do not understand. Adding an img to the cell content breaks the WebListBox.
Instead of adding an img to the content of the cell, you want to set the cell background image.
Hi Alexandre,
for example if you put this code in the CellClick() event:
[code]dim st() As String
st.append(“var tbody = document.getElementById(’” + me.controlID + “_userrows’);”)
st.append(“var cell = tbody.children.item(” + str(row) + “).children.item(” + str(column) + “);”)
st.append(“if (cell) {”)
st.append(“cell.style = ““background-image:url(‘http://www.w3schools.com/css/bgdesert.jpg’)””;”)
st.append("}")
ExecuteJavaScript(Join(st))[/code]
Listbox’s events are working and you get an image background when you click on the cell.
Regards.
Using a Xojo framework name such as _userrows is fragile, as Xojo can change that any moment.
It is probably cleaner to traverse the structure by tags.
Also, as it stands, your code replaces the whole style field. Better only add background-image, in case there is already something there.
[code] dim row as string = “3”
dim column as string = “0”
dim st() As String
st.append(“var tbody = document.getElementById(’” + me.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))[/code]
Hi @Maurizio Rossi, Hi @Michel Bujardet!
I tried both, that’s ok. This is my actual function
dim i as integer
for row=0 to lbx.RowCount-1
if lbx.cell(row,columnToReplace)=varToReplace then
lbx.cell(row,columnToReplace)=""
dim st() As String
st.append("var tbody = document.getElementById('" + lbx.controlID + "').getElementsByTagName('table')[1].getElementsByTagName('tbody')[0];")
st.append("var cell = tbody.getElementsByTagName('tr')["+str(row)+"].getElementsByTagName('td')["+str(columnToReplace)+"];")
st.append("if (cell) {")
st.append("cell.style.backgroundImage=""url('http://saleswave.server.com/public/images/ico-pj.png')"";")
st.append("}")
ExecuteJavaScript(Join(st))
end if
next
Now i just need to show only one time the backgroundimage, on vertical and horizontal center of the cell
Can you help?
Thank you very much!
Alex
Hi Alexandre,
at CSS background Property more options are shown for the background property.
To add these options simply change the value past the “=” character in the “cell.style” code with the required value as reported in the very first example shown at the above link.
Best regards.
Thank you all.
It’s working now.
Alex
Hi @Maurizio Rossi , Hi @Michel Bujardet
Using the same aproach, how can i set the weblistbox scroll bar to “display: none”?
Best regards!
Alex
This has absolutely nothing to do with placing a picture in a row. This should be discussed in the thread you just started at
https://forum.xojo.com/31217-how-to-hide-a-weblistbox-scrollbar
Thanks for all the useful info in this thread! I just implemented it and it worked great.
If you add the following line after the "st.append(“cell.style.backgroundImage…” line, the images won’t repeat within the cell.
st.append( "cell.style.backgroundRepeat=""no-repeat"";" )I’m trying to just use an image on my server but I can’t get it to show up.
This works just fine:
st.append(“cell.style.backgroundImage=”“url(‘http://www.w3schools.com/css/bgdesert.jpg’)”";")
st.append(“cell.style.backgroundRepeat=”“no-repeat”";")
But, this doesn’t work at all:
st.append(“cell.style.backgroundImage=”“url(‘bgdesert.jpg’)”";") [image uploaded to my server]
nor this:
st.append(“cell.style.backgroundImage=”"‘bgdesert.jpg’"";")
nor this:
st.append(“cell.style.backgroundImage=‘bgdesert.jpg’;”)
nor this:
st.append(“cell.style.backgroundImage=”“bgdesert.jpg”";")
nor this:
st.append(“cell.style.backgroundImage=”“bgdesert.jpg;”)
WW3 says this works: style.backgroundImage = “url(‘img_tree.png’)”; so this should:
cell.style.backgroundImage="url('dgdesert.jpg')"; but it doesn't
Where is the actual code this kind of thing located? I’m tired of guessing
Hi John,
the image is on your sever so you must pass the url of the image.
Who is serving the images to the browser?
If the image is coming from a Xojo web application you must create a webpicture from your image and use the webpicture.url property content for the “url()” text.
Remember to declare the webpicture property so it can be accesible when the picture is requested: make the webpicture a property of a page, session or anything else but not a local property of a method.
Regards.
It’s the same image from the example which works just fine. I just uploaded the image onto the server.
cell.style.backgroundImage=“url(‘http://www.w3schools.com/css/bgdesertdgdesert.jpg’)”; but cell.style.backgroundImage=“url(‘dgdesert.jpg’)”; doesn’t.
Are you guys having trouble with the new CellPicture method that does this for you?
When this thread started the Cellpicture method was not available…
1 Like
Nope . . . using Michel’s suggestion. Sounds like you may have an easier way. Does cellPicture work in weblistbox?
dim st() As String
st.append("var tbody = document.getElementById('" + me.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('images/CircleCalcLogo.jpg')"";")
st.append("}")
ExecuteJavaScript(Join(st))ok, so apparently cellPicture works in a webListBox.
Still waiting for drag and drop between weblistboxes 
Indeed, CellPicture is way easier. And in the end, it does just the same as what my method did.
I have to admit, after reading this and other threads about how to make this work, I really wanted to get this implemented. Fortunately, solving another framework issue made this one a little easier 