Why can’t I resize the columns on my weblistbox at runtime?
Hi Brian,
This property is not enabled by the IDE. But you can assign this code to facilitate end user:
----------------------------------------->
WebListBox.ColumnWidths=“20%,80%” (for two columns)
No I mean have the user resize the columns while the application is running…
Resizable columns was not in the original design.
This is one of the main reasons I’m still waiting to create a web app. I think it was a poor design decision to leave this feature out.
It makes me wonder if this is a feature that xojo is planning on implementing or have we seen the toolkit and it will stay the same?
Otherwise I guess we buy or develop our own.
Please?
Make a feedback case so they can ignore it for several years plan to implement it.
FWIW user-resizable elements on the web aren’t the easiest thing to implement; add that to the monstrous web framework and it quickly becomes a large task. I made a web-splitter control for someone, and to work within the Xojo framework it must use nested container controls. That WebListbox is a crazy amount of custom, I wouldn’t expect this feature to be easy to create.
After you populate your WebListBox you can auto-size your column widthss to their content. I also place a slider under my WebListBoxes to allow users to drag from 100% to 500% to let them see more text on smaller screens.
how?
Here is the code I use:
[code]Sub doSetListBoxColumnWidthsWAD(myWebListBox As Object, totalPercent As Integer = 100, minChars As Integer = 10, maxChars As Integer = 100)
'set column widths proportional to their content length that add to 100% so the PDF printing works!
'there is a similar method for setting PDF file column widths
'myWebListBox As WebListBox, totalPercent As Integer = 100, minChars As Integer = 15, maxChars As Integer = 100
Dim columnCharacters(-1) As Integer 'Used by Desktop/Web
Dim totalCharacterWidth As Integer 'Used by Desktop/Web 'width of all column maximums to get 100%
Dim tempString As String 'Used by Desktop
#if TargetDesktop then
Dim tempListBox As Listbox
if myWebListBox IsA Listbox then
tempListBox = Listbox(myWebListBox)
ReDim columnCharacters(tempListBox.ColumnCount) 'set as 1-based array
'set a minimum size of one character so %'s work and empty columns don't have zero width
for tempInt As Integer = 0 to tempListBox.ColumnCount - 1
columnCharacters(tempInt + 1) = len(tempListBox.Heading(tempInt))
next
'populate the array with the longest number of characters for each column
for tempInt As Integer = 0 to tempListBox.ListCount - 1
for tempInt2 As Integer = 0 to tempListBox.ColumnCount - 1
columnCharacters(tempInt2 + 1) = Max(columnCharacters(tempInt2 + 1), len(tempListBox.Cell(tempInt, tempInt2)))
next
next
'check the columns are within their limits and get the total max widths to determine the % for each column
totalCharacterWidth = 0
for tempInt As Integer = 1 to columnCharacters.Ubound
if columnCharacters(tempInt) < minChars then columnCharacters(tempInt) = minChars
if columnCharacters(tempInt) > maxChars then columnCharacters(tempInt) = maxChars
totalCharacterWidth = totalCharacterWidth + columnCharacters(tempInt)
next
'determine the percentage width for each column
for tempInt As Integer = 0 to tempListBox.ColumnCount - 1
tempString = tempString + Format(columnCharacters(tempInt + 1)/totalCharacterWidth * totalPercent, "####0.00") + "%," 'set the Listbox column width
next
if right(tempString, 1) = "," then tempString = left(tempString, len(tempString) - 1) 'remove trailing comma
tempListBox.ColumnWidths = tempString
end if
#elseif TargetWeb then
Dim tempListBox As WebListBox
if myWebListBox IsA WebListBox then
tempListBox = WebListBox(myWebListBox)
ReDim columnCharacters(tempListBox.ColumnCount) 'set as 1-based array
'set a minimum size of one character so %'s work and empty columns don't have zero width
for tempInt As Integer = 0 to tempListBox.ColumnCount - 1
columnCharacters(tempInt + 1) = len(tempListBox.Heading(tempInt))
next
'populate the array with the longest number of characters for each column
for tempInt As Integer = 0 to tempListBox.RowCount - 1
for tempInt2 As Integer = 0 to tempListBox.ColumnCount - 1
columnCharacters(tempInt2 + 1) = Max(columnCharacters(tempInt2 + 1), len(tempListBox.Cell(tempInt, tempInt2)))
next
next
'check the columns are within their limits and get the total max widths to determine the % for each column
totalCharacterWidth = 0
for tempInt As Integer = 1 to columnCharacters.Ubound
if columnCharacters(tempInt) < minChars then columnCharacters(tempInt) = minChars
if columnCharacters(tempInt) > maxChars then columnCharacters(tempInt) = maxChars
totalCharacterWidth = totalCharacterWidth + columnCharacters(tempInt)
next
'determine the percentage width for each column
for tempInt As Integer = 0 to tempListBox.ColumnCount - 1
tempListBox.ColumnWidth(tempInt) = Format(columnCharacters(tempInt + 1)/totalCharacterWidth * totalPercent, "####0.00") + "%" 'set the Listbox column width
next
end if
#endif
End Sub
[/code]
Thank you very much! I appreciate you input.
Does this guarantee that no column will be truncated such that you see … at the end of cells whose widths aren’t wide enough?
No. I set my WebListBoxes to be multiline so the text will wrap on spaces, but if your text line has few or no spaces then the excess characters might be hidden.
no need to, that’s already in the system waiting for others to receive some of their valuable feedback points: <https://xojo.com/issue/22168>
for a better approximation of the width of the content, you should experiment with Graphics.StringWidth() instead of Len(). On the Desktop you can get it almost pixel-correct when setting the right font parameters, whereas on the Web you can reach at least a better approximation of the relative widths of the individual columns then by comparing the number of characters.
I worked on the needed JavaScript to make that possible. It is is not quite trivial. Modifying a table that in fact contains all the rows within the page HTML code, is not as smooth as the Desktop, in the tests I conducted. And the WebListbox contained only a hundred rows or so.
there was long ago by the time realbasic did not handle column resize, a open source example to make that possible
I can’t find it anymore but may be the weblistbox can be extended the same way ?
remember it was some mousedown/move/up events tweaking
The weblistbox can be extended many ways through JavaScript. But then it will be more or less at the mercy of any change in Xojo Web framework.
A much better option is to create a new control from scratch, with all the desirable features. I have been working on such a project on the side, which goal is to emulate as closely as possible the desktop control.
It is already well under way. Other projects that pay the rent have taken precedence, but I will get back to it eventually, and plan on releasing it as soon as it is ready.