Add Separator in WebPopupMenu

I would like to be able to add a non selectable Separator to a WebPopupMenu just like you can do in the desktop equivalent.
Seems it’s not supported in WE since the WebPopupMenu doesn’t have .AddSeparator for some reason.
Maybe it could be done using JavaScript?

Or, maybe it could be done by disabling a particular row in a WebPopupMenu instead, simulating a separator?
In HTML you can see that a PopupMenu does in fact have a “disabled” attribute.
Does anyone know how to set this attribute to ‘disabled’ in a WebPopupMenu using Javascript? (I know…altering the DOM etc…)
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_option_disabled

Thank you in advance.

Managed to create this JS that disables a chosen row in a WebPopupMenu.
Guess that can do what I want for now.

Created a WebPopupMenu subclass with this method in it.

Sub AddSeparator(Optional rowText as String=" ")
  Dim js as String
  
  me.AddRow rowText
  js = "document.getElementById(""" + me.ControlID + "_inner"").options[" + Str(me.ListCount-1) + "].disabled=true"
  me.ExecuteJavaScript(js)
End Sub

Now this works:

MyPopupMenu.AddSeparator
MyPopupMenu.AddSeparator("Disabled row with text")

Hmm, any idea as to why the above code does not work when called multiple times on many PopupMenus?
I get the following JS error…

My solution is just a workaround.

When I add items to the webpopup, I first build the strings with the separator(s) and then add the strings to the webpopup. In the selection changed event, I call a method to extract the “selectable” part of the selection and then proceed appropriately in each context.

Not pretty, but it works.

Albin does this do what you need? It’s not a great example, but there are methods to add/remove items, enable/disable items and there’s an onChange event.

It’s not been well tested though.

CustomSelect.zip

I also found this select control that looks really nice.

https://select2.github.io/examples.html

[quote=217063:@Johnny Harris]Albin does this do what you need? It’s not a great example, but there are methods to add/remove items, enable/disable items and there’s an onChange event.

It’s not been well tested though.

CustomSelect.zip

I also found this select control that looks really nice.

https://select2.github.io/examples.html[/quote]
Sweet! It seems to work exactly like I want :slight_smile:
It does not seem to accept styles though. Is there a way to fix that?

I’m gonna try implementing it into my project!

[quote=217063:@Johnny Harris]I also found this select control that looks really nice.

https://select2.github.io/examples.html [/quote]
That would be really cool with the groups and search field integrated into the menu.
I don’t have the expertise needed to get that into WE though :wink:

Does anyone possess this magical expertise, let me know the price for a control like the above in WE!

Great! I’ll see what I can do with applying WE styles. I just threw it together real quick last night, so It will need some more work.

I’ve been working with the WebSDK for the past three weeks creating wrappers for jqWidgets and MetroUI CSS components, The Select2 control is one I plan on creating a wrapper for.

Looking forward to it!
Let me know the progress :slight_smile:

Albin… I just uploaded a new version. I changed the method ‘Additem’ to ‘AddOption’, so you will have to update any current code.
I removed the ‘SelectItem’ method and added property ‘SelectedItem’.

In addition: WE Styles should work now and I added a property ‘DisabledIsOptionGroup’ which will make any disabled options a group header instead of being disabled. The current example has this option set to true.

Let me know if you have any problems with it.

CustomSelect.zip

[quote=217153:@Johnny Harris]Albin… I just uploaded a new version. I changed the method ‘Additem’ to ‘AddOption’, so you will have to update any current code.
I removed the ‘SelectItem’ method and added property ‘SelectedItem’.

In addition: WE Styles should work now and I added a property ‘DisabledIsOptionGroup’ which will make any disabled options a group header instead of being disabled. The current example has this option set to true.

Let me know if you have any problems with it.

CustomSelect.zip[/quote]
Awesome control, @Johnny Harris! Kudos!

Albin, I made a couple of changes to this control today. If you’re still using this control you should download the newest version.
I don’t think I changed anything that would cause any changes to be made in existing code.

CustomSelect.zip

[quote=217286:@Johnny Harris]Albin, I made a couple of changes to this control today. If you’re still using this control you should download the newest version.
I don’t think I changed anything that would cause any changes to be made in existing code.

CustomSelect.zip[/quote]
Still seems to work as it should. I’ll create a branch of my project when trying to implement it later today to be sure everything works OK :slight_smile:

@Johnny Harris,
Okay,so I’ve tried to implement your CustomSelect Popupmenu into my project :slight_smile:
A really weird thing happens as soon as I’ve the put the control on a page.
I get an OutOfBounds exception when the .Show event is called for the page that contains the control. If I remove the control, everything works again.

Your demo project works fine though.
Any ideas?

Do you have a webstyle applied to the select control on the page?

It works ok for me until I apply a webstyle. If I apply a style the page never loads. If I remove the style, it works just fine.

I’ll check into it today.

Nope, no style on the control. OutOfBounds exception with and without it.
It’s strange as your demo project does work with and without a style…hmm :slight_smile:

Same thing if I create a new empty WE project and add the control to the page.

Maybe it’s the differences between the versions of Xojo we are using. I’ll check it out ASAP.

Love the control. Just have a few questions.

  1. I haven’t been able to figure out how to cycle through the options. How would I do this?
  2. I don’t see a method to specify a specific option?
  3. Is there a method for selecting an option based on Value?

Hi Scott… Thank You. Just keep in mind that this control hasn’t been well tested. If you have any suggestions or problems feel free to let me know. I just threw it together to see if Albin could use it. He’s always been a superb member of the Xojo community and always helping others. I thought I would try to help him. Anyone is welcome to use the control that can find a use for it.

Just so happens I was working on it when I read your post, so I made some changes. ( I’ll have a new version uploaded in a few hours ).

  1. I’ve set the Options property to public. So now you can iterate through each item by:
for each s as SelectOption in aSelect.Options
    MsgBox s.Caption
  next

or 

for x as integer = 0 to aSelect.Options.Ubound
     MsgBox aSelect.Options(x).Value
next
  1. To Set The Selected Item
 aSelect.SelectedIndex = 2  
  1. I just added 2 methods:
 aSelect.SelectByValue( value as string ) 
 aSelect.SelectByCaption( Caption as string ) 

Hope this helps

Just uploaded the new version.

WE CustomSelect Control