I’m using a color code for the background of a WebListBox cells to display the status of various processes in a workflow.
I’d like to keep this color code even when the row is selected. I’m aware of the WebListBox.SelectionStyle property.
Depending on the workflow status, there can be different background colors in the same row, and this property works at the row level only. I tried to workaround this by introducing some CSS in the App.HTMLHeader to catch the SelectionStyle CSS selector name, but this name is randomly generated.
As long as we can’t introduce pictures in webListbox, I have to use some unicode symbols to keep the status information available to the user even when the row is selected. But depending on the browser used this can go to barely acceptable look to a definitively ugly interface.
So I’m looking for other ideas to achieve this styling of the selected rows of a WebListBox. Any proposal?
I’m using a color code for the background of a WebListBox cells to display the status of various processes in a workflow.
I’d like to keep this color code even when the row is selected. I’m aware of the WebListBox.SelectionStyle property.
Depending on the workflow status, there can be different background colors in the same row, and this property works at the row level only. I tried to workaround this by introducing some CSS in the App.HTMLHeader to catch the SelectionStyle CSS selector name, but this name is randomly generated.
As long as we can’t introduce pictures in webListbox, I have to use some unicode symbols to keep the status information available to the user even when the row is selected. But depending on the browser used this can go to barely acceptable look to a definitively ugly interface.
So I’m looking for other ideas to achieve this styling of the selected rows of a WebListBox. Any proposal?[/quote]
You could finely manage the background and selection colors directly at the cell level with JavaScript.
You will see that the Selection color of a Row can be changed with CSS.
In order to achieve this, you need to setup the CSS for the listbox using a WebPageSource control.
In the Shown event of the PageSource control, the ControlID of the WebListbox is already defined.
What I did not mention is that you can mix icons and text, with a token like
MyIcon This is a text
You can also put all sorts of HTML to change text color in the cell, attributes, text size…
As I’m running out of time, I’ve used a few icons stored in a folder of the Apache server and the App.HTMLHeader property to enhance already defined WebStyles in order to add a ‘background-image’ property to the WebList cells. It works fine and fast, but the icons links are harcoded with an absolute URL in a HTML tag in the page header. It’ll do it for the upcoming test period. But as soon as I’m back, I’ll have a better look into Michel’s hack.
It appears once javascript replaces the token text with some HTML the listbox looks great but becomes unresponsive to mouse events. I can use the scroll wheel but dragging the scroll bar or mouse down events don’t work.
I have repeatedly tested this with replacing every token or just the first. It simply locks the listbox and no method, event or anything works. Unless you embed it with a container so you can destroy it and do not need to interact with it - dont use this method.
The problem is that when you muck with the DOM manually like this, the events were connected to the one you replaced. This does not surprise me at all.
Nothing in computing comes without some amount of karma. People who use WE regularly do use JS a lot to work around the many limitations of Xojo, but it does not always work.
To be honest, the WebSDK is here to create custom controls. That said, I am not too sure creating a custom WebListBox that support changing cells colors is any easier than using an HTML table in a Page Source (which I find better than the HTMLViewer as tapping into an iFrame is yet another pile of joy).
Along those lines…WebListBoxTD in Web Custom Controls supports HTML in cells. The demo on my site let’s you use CLEditor (another control in the kit) to add rows and set cells in a sample list box.
In light of Greg’s comment, this particular control is not a unique control running on an SDK (mine in 1.3.3; the official one in the coming 2.0 release). I’ve subclassed WebListBox and “mucked around” with it a bit. The pro is that you can literally change the Super of a WebListBox already on your page and call the new methods to set cell HTML. Your other existing WebListBox code should work fine. The con is that I can’t guarantee future Xojo releases won’t break this control requiring an update from me.
This has been a popular control and, FWIW, it has held up well so far.
[quote=180061:@Daniel Taylor]Along those lines…WebListBoxTD in Web Custom Controls supports HTML in cells. The demo on my site let’s you use CLEditor (another control in the kit) to add rows and set cells in a sample list box.
In light of Greg’s comment, this particular control is not a unique control running on an SDK (mine in 1.3.3; the official one in the coming 2.0 release). I’ve subclassed WebListBox and “mucked around” with it a bit. The pro is that you can literally change the Super of a WebListBox already on your page and call the new methods to set cell HTML. Your other existing WebListBox code should work fine. The con is that I can’t guarantee future Xojo releases won’t break this control requiring an update from me.
This has been a popular control and, FWIW, it has held up well so far.[/quote]
For anyone looking to remove the “transparency and white text” default styling of the selected rows I have a helper method to do this. This allows your manually assigned cell background color and text color to show through and it completely removes the appearance that rows have been selected.
ListBox1.UseDefaultSelectionStyle = false[/code]
Add this method to a module to use:
[code]Sub UseDefaultSelectionStyle(extends lb as WebListBox, assigns allow as Boolean)
dim styleId as string = lb.ControlID+"_NoDefaultSelectionStyle"
if allow then
dim s as string = "<style type='text/css' id='"+styleid+"'>" + _
"div.listbox #<<control_id>>_content tr.selected td" + _
"{" + _
" background-color: transparent !important;" + _
" color: inherit !important;" + _
"}" + _
"</style>"
lb.ExecuteJavaScript(lb.JqeurySelector+".append("""+s.Replace("<<control_id>>",lb.ControlID)+""");")
else
lb.ExecuteJavaScript("$('#"+styleId+"').remove();")
end
End Sub
This also uses JQuery to implement so you will to add this to the App.HTMLHeader property as well
