checkbox in webListbox?

  1. ‹ Older
  2. 4 years ago

    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.

  3. Chris C

    2 Jul 2015 Pre-Release Testers, Xojo Pro Thatcham, Berkshire, UK, Europ...

    @Matthew Mellen 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 `checked`string value.

  4. Michel B

    2 Jul 2015 Pre-Release Testers RubberViews.com
    Edited 4 years ago

    @Matthew M 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.

    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)

  5. Brock N

    2 Jul 2015 Pre-Release Testers, Xojo Pro

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

    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.

  6. Michel B

    2 Jul 2015 Pre-Release Testers RubberViews.com

    @Brock N You could also set the cellStyle of all the cell's in that column instead.

    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.

  7. Chris C

    3 Jul 2015 Pre-Release Testers, Xojo Pro Thatcham, Berkshire, UK, Europ...
    Edited 4 years ago

    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 ) = ☒

  8. Michel B

    3 Jul 2015 Pre-Release Testers RubberViews.com

    @Chris C 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 ) = ☒

    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.

  9. Michel B

    3 Jul 2015 Pre-Release Testers RubberViews.com

    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.

  10. Chris C

    3 Jul 2015 Pre-Release Testers, Xojo Pro Thatcham, Berkshire, UK, Europ...
    Edited 4 years ago

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

    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.

  11. Michel B

    3 Jul 2015 Pre-Release Testers RubberViews.com

    @Brock N 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.

    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.

  12. Brock N

    6 Jul 2015 Pre-Release Testers, Xojo Pro

    @Michel B 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 "<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>") 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
  13. Michel B

    6 Jul 2015 Pre-Release Testers RubberViews.com
    Edited 4 years ago

    @Brock N 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 "<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>") 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 :)

    Good luck with your library.

  14. Brock N

    6 Jul 2015 Pre-Release Testers, Xojo Pro

    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
  15. Caviola M

    18 Aug 2015 Pre-Release Testers, Xojo Pro Europe (Italy,Belluno)

    @Brock N 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 "<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>") 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!!

  16. Brock N

    18 Aug 2015 Pre-Release Testers, Xojo Pro

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

    Here's a basic example:
    https://www.dropbox.com/s/t7hpy00tpu0mdwu/EmbedCCinListbox.xojo_binary_project?dl=0

  17. Michel B

    18 Aug 2015 Pre-Release Testers RubberViews.com

    @Brock N Here's a basic example:
    https://www.dropbox.com/s/t7hpy00tpu0mdwu/EmbedCCinListbox.xojo_binary_project?dl=0

    Works great. Thank you Brock :)

  18. Juan T

    3 Oct 2015 Pre-Release Testers, Xojo Pro

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

  19. Alexis C

    30 Nov 2015 Pre-Release Testers, Xojo Pro Puerto Rico, USA

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

  20. Brock N

    1 Dec 2015 Pre-Release Testers, Xojo Pro

    @Alexis Cnbsp;Lugo Hi Brock Nash
    can i use webtextbox with same way for edit data on the weblistbox

    Yes you can. You can embed any containerControl. It will be up to your code to manage and destroy them however.

  21. Alexis C

    10 Dec 2015 Pre-Release Testers, Xojo Pro Puerto Rico, USA

    Hi Brock Nash

    i add same code you have but with TextBox but i can no see it on the col 1

    Help
    ------ CellClick
    if cccb <> nil then
    ListBox1.cellPrependControl(cccb, row, 0)
    end
    If mText <> nil Then
    ListBox1.cellPrependControl(mText,row,1)
    End If
    ---------
    on Show

    ListBox1.AddRow
    ListBox1.AddRow

    cccb = new CCCheckBox
    cccb.EmbedWithin(session.CurrentPage, 0, 0, cccb.Width, cccb.Height)
    ListBox1.cellPrependControl(cccb, 1, 0)

    mText = new tTextBox
    mText.EmbedWithin(session.CurrentPage, 0, 0, mText.Width, mText.Height)
    ListBox1.cellPrependControl(mText,1,0)

  22. Newer ›

or Sign Up to reply!