Xojo2025R1: WebListBox with DataSource - how to right justify column header?

Targets Web
1

In the DataSource.RowData method I have following code:

If vColumnDataStrArray(7) = "right" Then
  vUseStyle = True
  vStyle.Value("text-align") = "right" // 2024.08.09 <gp> 
  
ElseIf vColumnDataStrArray(7) = "center" Then
  vUseStyle = True
  vStyle.Value("text-align") = "center" // 2024.08.30 <gp> 
End If

This is working fine for data in the column as shown below:

Screenshot 2025-05-02 at 10.32.24 AM
Screenshot 2025-05-02 at 10.32.24 AM3226×968 345 KB

However, I would like the column header justification be the same as the data in the row.

What can I do to make it happen?

3

weblistbox between API1 and 2 are completely different


2 Likes
4

Probably and most certainly, but I didn’t want to compare anything. All I am asking is if there is a way to explicitly justify column header in the WebListBox using DataSource.

If it is possible then I would like to learn how to do it.

If it is not possible then I am still able to sleep, but perhaps it would be possible in the future.

5

I was reacting to Emile’s post, that linked to an old forum post for API1 weblistbox

you could use javascript yes, but you have to read the html code created by your xojo webapp
and use executejavascript on the weblistbox to add some style to the header.
I don’t see why emile’s post was flagged and masked, it was just not answering your question


I made long ago my own websdk for bootstrap tables, and made a right alignment like you want
but it was mainly at the beginning of web2, and the listbox was 
 well 
 not very finished !
since then, I still use my websdk table, it is linked to my database module and classes and works fine for me
I did not use any weblistbox since, but I can see that @Ricardo_Cruz fixed a lot on it, and may be he has some workaround for you.

also @AlbertoD who helped you to right align the column rows


1 Like
6

Great, I have actually “asked” ChatGPT and now I think I am on the right path.
The following code:

ExecuteJavaScript("var headers = document.querySelectorAll('#" + ResultsListBox.ControlID + " thead th');headers.forEach(function(header) {header.classList.add('right-align-header');});")

will apply “right” justification to all columns in the header of the ResultsListBox provided that I add

<style>
th.right-align-header {
  text-align: right !important;
}
</style>

into App header.

This seems to be working. All I need to do now is to put the style into CSS instead and get the index of the column off my column array.

Thanks.

7

You can use the Bootstrap class ‘text-end’ instead.

8

Just tested “text-end” in the java script and this will work too. But then, how do I center text if needed?

9

Class “text-center”

10

Great, thank you, this will eliminate the need to add new style to CSS.
So, I have settled for the method that has this code:

ExecuteJavaScript("var header = document.querySelector('#" + ResultsListBox.ControlID + " thead th:nth-child(" + pColNum.ToString + ")');if (header) { header.classList.add('text-end'); }")

and

ExecuteJavaScript("var header = document.querySelector('#" + ResultsListBox.ControlID + " thead th:nth-child(" + pColNum.ToString + ")');if (header) { header.classList.add('text-center'); }")

Now I need to make it work with the array for each WebListBox definition.
Thank you.

11

seems missing in WebListboxColumnData

WebListBoxRowData can use WebListBoxStyleRenderer / WebStyle

i made a feature request / issue for the WebDataSource Interface

1 Like
12

Thank you. I am not sure if I understand this correctly but so far I have been setting justification in the DataSource.RowData using WebStyle for each element of the data row for the WebListBox. I think having option to specify justification for each column in one place one time would be really helpful, even obvious (that is what I have been doing for years when developing Desktop Apps and building lists dynamically, though outside of Xojo world).
Anyway, thank you for your comments.

1 Like