B4J Question Write text in TableView column in either red or black

strupp01 · Mar 8, 2018

I have a TableView with 8 columns. Depending on the value to be entered, I would like to display the value in red or black in column 7.
It does not matter if the color is changed when saving to the TableView or directly afterwards.
Have already tried CSSUtils.SetStyleProperty, but it has not worked yet.
Who can help ?

Erel · Mar 8, 2018

Check this: https://www.b4x.com/android/forum/threads/tableview-header-color.90021/#post-569633

strupp01 · Mar 8, 2018

I looked at the example, but found no solution for me.
I want to set the font color to red or black. For a TextArea, this works like this: CSSUtils.SetStyleProperty (long text, "- fx-text-fill", "RED")

I've tried it like this:
SetColumnStyle(Angebot_Neu.Liste_Angebot,7, "-fx-text-fill: Red;")

Sub SetColumnStyle(table As TableView,Index As Int, Style As String)
Dim jo As JavaObject = table
Dim Column As JavaObject = jo.RunMethodJO("getColumns", Null).RunMethod("get", Array(Index))
Column.RunMethod("setStyle", Array(Style))
End Sub

But it does not work either.

Daestrum · Mar 8, 2018

If you look at the example Erel suggested, if you add this to the css file you can choose the colour of the text in a column.

This example code will change column 3 text to red leaving the others as default black.

B4X:

.table-view .table-cell.col3{
 -fx-text-fill: red;
}

NOTE:
This changes all the values in the column. If you want the colour to change on individual values ie <0 = red >0 = black, then you will need to write the cellfactory for that column as that is the only place you can get to the display label for that cell.

strupp01 · Mar 8, 2018

I am very confused now. I would like to change the color in a column to red when 3? so '???' contained in the text of the column.
My TableView is 'Liste_Angebot'. Column 7 should be checked and, if necessary, changed.

B4X:

        If GetCellValue(Markierte_Listen_Zeile, 7).Contains("???") = True Then
            CSSUtils.SetStyleProperty(.table-Liste_Angebot.table-Markierte_Listen_Zeile.col7{-fx-text-fill: red;})
        End If

It does not work that way.
Can you write me the code for CSSUtils?

The text 'Erstattung lt. Rechnung_Nr. ???' should be red.

Daestrum · Mar 8, 2018

Sorry if I did not make my reply clear.

In order to have different coloured text within one column you write a cellfactory for the column.

This example will show you the mechanics of the cell factory. (It's written in java, not been able to recreate in b4j code)

B4X:

#if java
import javafx.scene.control.*; 
import javafx.util.Callback;
import javafx.scene.paint.Color;
public static void setColumnColour(TableColumn tc){
    tc.setCellFactory(new Callback<TableColumn, TableCell>() {
        @Override
        public TableCell call(TableColumn param) {
            return new TableCell<Object, Object>() {
                @Override
                public void updateItem(Object item, boolean empty) {
                    super.updateItem(item, empty);
                    if (!isEmpty()){
       if((Integer)item < 0) {
    // value less than zero - text colour is RED
                      setTextFill(Color.RED);
       setText(""+item);
      } else {
    // value >= 0  - text colour is black
       setTextFill(Color.BLACK);
       setText(""+item);
      }
     } 
                }
            };
        }
    });
} 
#End If

And it is called like

B4X:

...
 Dim cols As List
 cols = asJO(TableView1).RunMethodJO("getColumns",Null)
 Dim cnt As Int = 1
 For Each col As JavaObject In cols
  col.RunMethodJO("getStyleClass",Null).RunMethod("add",Array("col"&cnt))
  If cnt=3 Then ' call the routine on column 3
   asJO(Me).RunMethod("setColumnColour",Array(col))
  End If
  cnt = cnt + 1
 Next
...
Sub asJO(o As JavaObject) As JavaObject
 Return o
End Sub

(sorry about the formatting - MS edge won't copy properly)

Daestrum · Mar 8, 2018

An example changed to detect the '???' in column 3, should be easier to incorporate into your code.

strupp01 · Mar 9, 2018

@Daestrum
Thank you for your example. Is for me as a hobby programmer already very complicated. Do I have to look further? Had hoped that there would be a command, as for a TextArea (CSSUtils.SetStyleProperty (long text, "- fx-text-fill", "RED")).
Thank you for your help, because as an amateur programmer I often depend on such examples.

Greeting strupp01

Informatix · Mar 12, 2018

strupp01 said:
I have a TableView with 8 columns. Depending on the value to be entered, I would like to display the value in red or black in column 7.
It does not matter if the color is changed when saving to the TableView or directly afterwards.
Have already tried CSSUtils.SetStyleProperty, but it has not worked yet.
Who can help ?

Did you look at jTableViewExtended ?

strupp01 · Mar 13, 2018

I found a solution myself by trying it out myself.

B4X:

        SetCellValue(Angebot_Neu.Liste_Angebot.SelectedRow-1, 9, "-fx-text-fill: red")

B4X:

Sub SetCellValue(RowIndex As Int, CellIndex As Int, Value1 As String)
    GetLabel(RowIndex, CellIndex).style = Value1
End Sub

Sub GetLabel(RowIndex As Int, CellIndex As Int) As Label
    Dim row() As Object = Angebot_Neu.Liste_Angebot.Items.Get(RowIndex)
    Return row(CellIndex)
End Sub

As a result, column 9 of the selected line is displayed in red.
This solved my problem.
Thanks to everyone for their help.
strupp01

jmon · Oct 19, 2023

I iterated from @Daestrum 's code. This example will set the style of the cell based on a map of "text"/"style", simple to adapt to any existing project. Here, for example if the text is "On", it will apply the style of green background.

Note that the style is applied on all the cells of the entire TableView. And it retains the ability to sort the columns by clicking on the header.

B4X:

Sub Button1_Click
   
    tv.Items.Clear
   
    'Create some random items
    For i = 0 To 10
        tv.Items.Add(Array( _
            IIf(Rnd(0,2) > 0, "Bob", "Marc"), _
            IIf(Rnd(0,2) > 0, "On", "Off"), _
            IIf(Rnd(0,2) > 0, "Yes", "No") _
            ))
    Next
   
    TableViewSetCellColour(tv, CreateMap( _
        "On": "-fx-background-color: rgba(255, 0, 0, 0.5); -fx-text-fill:white;", _
        "Off": "-fx-background-color: rgba(0, 255, 0, 0.5);", _
        "Yes": "-fx-background-color: pink;" _
        ))
   
End Sub



'theTable: The tableview to operate on
'TextVSStyleMap: A map of String and the corresponding CSS style to apply if matching.
'Original code from @Daestrum
Sub TableViewSetCellColour(theTable As TableView, TextVSStyleMap As Map)
    Dim cols As List = theTable.as(JavaObject).RunMethodJO("getColumns", Null)
    Dim i As Int = 1
    Dim joMe As JavaObject = Me
    For Each col As JavaObject In cols
        col.RunMethodJO("getStyleClass", Null).RunMethod("add", Array("col" & i))
        joMe.RunMethod("setColumnColour", Array(col, TextVSStyleMap))
        i = i + 1
    Next
End Sub
#if java
import javafx.scene.control.*;
import javafx.util.Callback;
import javafx.scene.control.TableCell;
import javafx.scene.control.TableColumn;
import javafx.scene.paint.Color;
import java.util.Map;

public static void setColumnColour(TableColumn tc, Map<String, String> textStyleMap) {
    tc.setCellFactory(new Callback<TableColumn, TableCell>() {
        @Override
        public TableCell call(TableColumn param) {
            return new TableCell<Object, Object>() {
                @Override
                public void updateItem(Object item, boolean empty) {
                    super.updateItem(item, empty);
                    if (!isEmpty()) {
                        if (textStyleMap.containsKey(String.valueOf(item))) {
                            String style = textStyleMap.get(String.valueOf(item));
                            setStyle(style);
                           
                        } else {
                            setStyle("");
                           
                        }
                        setText(String.valueOf(item));
                       
                    }
                }
            };
        }
    });
}
#End If

B4J Question Write text in TableView column in either red or black

strupp01

Active Member

Erel

B4X founder

strupp01

Active Member

Daestrum

Expert

strupp01

Active Member

Daestrum

Expert

Daestrum

Expert

Attachments

strupp01

Active Member

Informatix

Expert

strupp01

Active Member

jmon

Well-Known Member

Attachments

B4J Question Write text in TableView column in either red or black

Active Member

B4X founder

Active Member

Expert

Active Member

Expert

Expert

Attachments

Active Member

Expert

Active Member

Well-Known Member

Attachments

Privacy & Transparency

Privacy & Transparency