Xojo2024R2: WebListBox with DataSource how to modify ColumnData?

I have ResultsList control (WebListBox with DataSource). I can set default column layout by modifying DataSource.ColumnData using code such as:

col = New WebListboxColumnData
col.DatabaseColumnName = "account_code" // the name of the field in your database or data source
col.Heading = "Account" // the name that appears above the column
col.Sortable = True // Whether or not the column is sortable
col.SortDirection = Weblistbox.SortDirections.Ascending // The default sort direction for the column
col.Width = "200"
cols.Add(col)

Return cols

I pass the query to the underlying DataSource class via SetQuery method ex:

QueryPageDataSource(ResultsList.DataSource).SetQuery (vQuery,Param1Field.text)
ResultsList.ReloadData

I need to change the layout of the ResultsList (aka modify column headings) to match another query send to the SetQuery method - the idea is to select the Report (aka query) from the list and then build the ResultsList.

I believe the ColumnData method is only used once which is OK for the default column layout but not if I send different query to the SetQuery method.

Assuming for simplicity that I know the number of columns needed and their respecting labels, how should I go about changing the column layout in the ResultsList?

You add a property/flag to change the columns you want on your DataSource, change the flag, connect to the DataSource again and reload data.

screencast2024-06-2710AM-27-35-ezgif.com-video-to-gif-converter

Alberto, I would like to change the layout of columns once I call QueryPageDataSource.SetQuery - so this is my trigger (aka flag). Now, how do I “connect to the DataSource” to have the ColumnData method executed again?

This is what I did with Ricardo’s example (posted in another thread):

Edit: in your case you need to change something else not just a new query using the connected datasource

1 Like

Alberto, nothing is ever easy. In the example I see the following:

I can’t seem to be able to add QueryPageDataSource in the similar way to my QueryPage.
All I have is this:


Ricardo just dragged DatabaseDataSource to the WebPage1 and renamed it MyDataSource

1 Like

I wish that was that easy, unfortunately I can’t drag/drop nor copy/paste.

By Drag and Drop I mean this:

screencast2024-06-2711AM-03-12-ezgif.com-video-to-gif-converter

I’m not saying that you drag/drop Ricardo’s datasource.

1 Like

OK, I didn’t know about dragging class QueryPageDataSource onto my web page QueryPage - I have learned something new today - thank you.

1 Like

Alberto, I have more questions. After dragging QueryPageDataSource onto my QueryPage I have accepted the default name QueryPageDataSource1. Now I have in Opening event of the QueryPage the code:

ResultsList.DataSource = new QueryPageDataSource1

Is this needed?

It looks like my RunQuery method works with or without it

If QueryPageDataSource1.ChangeColLayout Then
  QueryPageDataSource1.ChangeColLayout = False
Else
  QueryPageDataSource1.ChangeColLayout = True
End If
ResultsList.DataSource = QueryPageDataSource1

QueryPageDataSource1.SetQuery (vQuery,Param1Field.text)
ResultsList.ReloadData

Btw, I get some inconsistent results, possibly due to the network latency as I connect to the Postgres Database remotely. I get the column layout changed but sometimes the data is not showing as expected.

as you are doing this after opening event

ResultsList.DataSource = QueryPageDataSource1

then it is not needed. And because you create QueryPageDataSource1 for your WebPage you don’t need to use ‘new’

1 Like

OK, thank you for clarification. You have helped me a lot today.

1 Like

One last comment, it my quick testing it seems that there is some problem with the way how the DataSource is populating the WebListBox. I have clicked several times to show 1 or 5 columns for the same query and did the ReloadData. While the layout of the WebListBox changed without any problem (as I want) the list was sometimes blank instead of showing the data (I use the same query so I know the data is there, just testing different column layout).