checkbox in webListbox?

Is there are a way to get a check box column in a weblistbox?
i.g. the first column of every row has a check box widget.

Not natively. But you can use characters &uF06F (Box) and &uF0FE (checked box) of the WingDings font to emulate that.

Is there any way that you can elaborate, or show a snippet of that in action? I need to be able to select multiple items in a weblistbox.

This is one way…

Set a cell’s value to either a checked or unchecked string value ( perhaps as given by Michell, above, or you could choose some other character or character string for each state, eg: X or O just to get going )

Use the Cellclick event to see if it is a click in one of your checkboxes - compare the cell content to your chosen checked / unchecked character(s). If so flip its state .

To look at the states of all checkboxes, you can iterate through the rows and compare each checkbox cell to the checkedstring value.

Actually, there is an additional difficulty. WebListBox does not allow by default the choice of WingDings as font for only one column.

Instead of that, I have used &u25A1and &u221A : ? ? which exist in all standard fonts.

Here is an example of populating the WebListBox with the boxes in Column zero :

Sub Open() for i as integer = 0 to 9 me.addrow(&u25A1, str(i)) next End Sub
To toggle the state :

Sub CellClick(Row As Integer, Column As Integer) if Column = 0 and me.cell(Row, column) = &u25A1 then Me.Cell(Row, column) = &u221A else Me.Cell(Row,Column) = &u25A1 end if End Sub

Checked as boolean = (WebListBox1.Cell(row, column) = &u221A)

1 Like

You could also set the cellStyle of all the cell’s in that column instead.

Personally I embed container controls in my WebListBoxCells using jQuery.

[quote=198302:@Brock Nash]You could also set the cellStyle of all the cell’s in that column instead.
[/quote]

You are right. I must be real tired. Indeed that is the solution to use WingDings.

The only issue with that is that neither Linux, Android or iOS will have these fonts. Pass using some webfont, the solution I posted is probably the easiest.

I’m not the expert on fonts that Michel is, but rightly or wrongly, for web, I use the UTF values &u2611 for check and &u2610 for uncheck - this is without any font name being specified by my code.

I’ll paste the chars here ( so we’ll see if they show up OK ) Checked=? Unchecked=?

An alternative checked value ( &u2612 ) = ?

[quote=198374:@Chris Carter]I’m not the expert on fonts that Michel is, but rightly or wrongly, for web, I use the UTF values &u2611 for check and &u2610 for uncheck - this is without any font name being specified by my code.

I’ll paste the chars here ( so we’ll see if they show up OK ) Checked=? Unchecked=?

An alternative checked value ( &u2612 ) = ?[/quote]

You know, each font often contains thousands of characters, and systems substitute. I had looked at the content of a standard font and not found these characters. Who know where the system fetches them ? At any rate, it works, and that is what is important. And more importantly, it does in iOS. Chances are it does in Android too, although I could not verify it, my Android tablet battery is down.

That is brilliant Chris. Exactly what is needed.

Thank you.

Ouch. &u2611 and &u2610 do not work in Android. Both a strange character with no resemblance probably meaning not found.

Android represents about half the mobile devices.

Not tested Linux, but the number of browsing computers is quite limited in comparison.

Just tried on my Android tablet (Asus) and those characters don’t show up at all.

The two browsers I tried on Android were both render=WebKit

The browsers I know work on Win / Linux ( IE, Firefox, IceWeasel ) are renderer=Geko

For now I’m just using some ordinary strings on non-Geko sessions ( “[ x]” and “” )
Not pretty, but my web application audience is limited at present.

[quote=198302:@Brock Nash]You could also set the cellStyle of all the cell’s in that column instead.

Personally I embed container controls in my WebListBoxCells using jQuery.[/quote]

Brock, this is great. Any chance you could share the way you do that ? Not long ago I tried to insert pictures in a WebListBox. The pictures displayed fine, but the control froze.

Currently I’m doing it like this:

dim cc as new MyContainerToEmbed cc.EmbedWithin(self, 0, 0, 20, 20) ListBox1.cellAppendControl(cc, 0, 0) currentControl = cc

The cellAppendControl extension method looks like this:

Sub cellAppendControl(extends lb as WebListBox, wc as webcontrol, row as integer, column as integer) dim script() as string script.append wc.JqeurySelector+".detach().appendTo("+lb.cellSelector(row, column)+");" script.append wc.JqeurySelector+".css('position','relative');" lb.ExecuteJavaScript(join(script, EndOfLine.Windows)) wc.Left = 0 wc.Top = 0 End Sub

The JqeurySelector extension method looks like this:

Function JqeurySelector(extends wc as webControl) As String return "$('#"+wc.ControlID+"')" End Function

Keep in mind you will need to include JQuery into your project (add this to the app header “”) and that if you a dynamically adding and removing content from you listbox after the initial pageload, then you will need to keep references to the ContainerControls you embed in the listbox so you can clear them out of memory when removing a row. This could also be done automatically with a subclass of the WebListBox. Keep in mind this is a hack on the existing Xojo framework and can not be guaranteed to work in all future releases. I also have a jquery library that makes Jquery a lot easier but it’s not yet public. But you can essentially do stuff like:

myControl.jquery.css("width","50%").css("margin","5px").script.run

[quote=198825:@Brock Nash]Currently I’m doing it like this:

dim cc as new MyContainerToEmbed cc.EmbedWithin(self, 0, 0, 20, 20) ListBox1.cellAppendControl(cc, 0, 0) currentControl = cc

The cellAppendControl extension method looks like this:

Sub cellAppendControl(extends lb as WebListBox, wc as webcontrol, row as integer, column as integer) dim script() as string script.append wc.JqeurySelector+".detach().appendTo("+lb.cellSelector(row, column)+");" script.append wc.JqeurySelector+".css('position','relative');" lb.ExecuteJavaScript(join(script, EndOfLine.Windows)) wc.Left = 0 wc.Top = 0 End Sub

The JqeurySelector extension method looks like this:

Function JqeurySelector(extends wc as webControl) As String return "$('#"+wc.ControlID+"')" End Function

Keep in mind you will need to include JQuery into your project (add this to the app header “”) and that if you a dynamically adding and removing content from you listbox after the initial pageload, then you will need to keep references to the ContainerControls you embed in the listbox so you can clear them out of memory when removing a row. This could also be done automatically with a subclass of the WebListBox. Keep in mind this is a hack on the existing Xojo framework and can not be guaranteed to work in all future releases. I also have a jquery library that makes Jquery a lot easier but it’s not yet public. But you can essentially do stuff like:

myControl.jquery.css("width","50%").css("margin","5px").script.run

Superb. Thank you so much :slight_smile:

Good luck with your library.

I missed adding the cellSelector method for a WebListBox

Function cellSelector(extends lb as WebListBox, row as integer, column as integer) As String return "$('#" +lb.ControlID + "_userrows tr').eq(" + str(Row) + ").find('td').eq(" + str(Column) + ")" End Function

[quote=198825:@Brock Nash]Currently I’m doing it like this:

dim cc as new MyContainerToEmbed cc.EmbedWithin(self, 0, 0, 20, 20) ListBox1.cellAppendControl(cc, 0, 0) currentControl = cc

The cellAppendControl extension method looks like this:

Sub cellAppendControl(extends lb as WebListBox, wc as webcontrol, row as integer, column as integer) dim script() as string script.append wc.JqeurySelector+".detach().appendTo("+lb.cellSelector(row, column)+");" script.append wc.JqeurySelector+".css('position','relative');" lb.ExecuteJavaScript(join(script, EndOfLine.Windows)) wc.Left = 0 wc.Top = 0 End Sub

The JqeurySelector extension method looks like this:

Function JqeurySelector(extends wc as webControl) As String return "$('#"+wc.ControlID+"')" End Function

Keep in mind you will need to include JQuery into your project (add this to the app header “”) and that if you a dynamically adding and removing content from you listbox after the initial pageload, then you will need to keep references to the ContainerControls you embed in the listbox so you can clear them out of memory when removing a row. This could also be done automatically with a subclass of the WebListBox. Keep in mind this is a hack on the existing Xojo framework and can not be guaranteed to work in all future releases. I also have a jquery library that makes Jquery a lot easier but it’s not yet public. But you can essentially do stuff like:

myControl.jquery.css("width","50%").css("margin","5px").script.run

can have a complete sample source, I have trouble creating what is written!!

Here’s a basic example:

[quote=207817:@Brock Nash]Here’s a basic example:
https://www.dropbox.com/s/t7hpy00tpu0mdwu/EmbedCCinListbox.xojo_binary_project?dl=0[/quote]

Works great. Thank you Brock :slight_smile:

Hi Brock, how change your sample to embed a webtextfield instead to make a editable cell?

Hi Brock Nash
can i use webtextbox with same way for edit data on the weblistbox