[Tutorial] [Howto] Sort Weblistsboxes - One Function for all Listboxes

Hello,

this is my third tutorial about some code-stuff I use in my webapps.

One of the functions I miss most in Xojo Webedition is an easy way to sort weblistboxes. In the Xojo examples is a project with a listbox with static columns.
Since I often use dynamic filled listboxes with different column counts, most examples wount work.

Another fact is, that there is no working example or hint in this forum, which solves the problem.

So I used my brain and made a simple solution, that everyone can use.

What you need:

  1. one Function: SortListbox Place it in the App or Session Element for example
  2. one empty Class: SortItem

Parameters & Properties:
The Function SortListbox needs 2 parameter:

  • LST as WebListBox - this is our listbox which we want to sort
  • SelectedHeader as integer - this is the id of the column which is the source of the sort order

The class SortItem needs 2 properties:

  • ColumnValues() as String - an array where we store one row of our listbox
  • HeadIndex as integer - the index of the header the user clicked in the listbox

The code for sorting:

  1. Our Function get the following code:

[code] dim Cols() as SortItem
dim Head() as string

'Load the contents of the Listbox into an array (each row its own) (vals) and add them to an sortitem
'Load the contents of the column whis is about to sort into its own array (head)
for a as integer = 0 to LST.RowCount - 1
Head.Append(LST.Cell(a, SelectedHeader))

dim C as new SortItem_Column
C.HeadIndex = SelectedHeader

dim values() as string
for n as integer = 0 to LST.ColumnCount - 1
  values.Append(LST.Cell(a, n))
next
C.ColumnValues = values
cols.Append(C)

next

'Use the sortwith-function. So the head-column is sorted, the cols-array with the sortitem-objects will be sorted in the same order
head.SortWith(cols)

'delete all rows from the listbox
LST.DeleteAllRows

'add the sortet rows back to the listbox
for i as integer = 0 to cols.Ubound
dim vals() as string = cols(i).ColumnValues
dim d as integer = LST.AddRow()

for a as integer = 0 to vals.Ubound
  LST.Cell(d, a) = vals(a)
  
  lst.Heading(a) = ReplaceAll(lst.Heading(a), " ?","") 'remove the sorted-sign from each column-header
next

next

lst.Heading(SelectedHeader) = lst.Heading(SelectedHeader) + " ?"'add a sign to column-header to show which column is sorted
[/code]

  1. The Listbox gets the following code in its HeaderPressed event:
app.SortListbox(me, column)

Thats all!

All you need to do is, to copy the function an create the simple class, which has no code. After this you add the one codeline to the HeaderPressed event of each of your listboxes. Now you have self-sorted listboxes.

don’t forget to check my other Turorials :wink:
https://forum.xojo.com/24232-howto-wait-indicator-in-long-processes-without-timer-or-threads/p1#p202015
https://forum.xojo.com/23367-tutorial-using-css-in-webapps-to-make-your-webapp-more-beautiful
https://forum.xojo.com/17628-fontawesome-icons-in-xojoweb

Hope you’ll find this usefull!

Greetings

Lars

This is a really nice starting point, thanks a lot. To be truly useful it needs to

  • not lose cell web styles upon restoring
  • be able to sort with dates, integers
  • reverse the sort order

This is tricky (though doable), and I sure hope the good people at Xojo will come to the rescue.

I’m working on an implementation of these features.

Reverse sort order is finished, sorting with integers also.

I’ll attach an example project if I’m ready!

Lars, did you ever complete the changes?