1 2 Previous Next 16 Replies Latest reply: Apr 23, 2012 2:20 AM by jsmith RSS

    Tableview this.table.setColumnResizePolicy

    Celer
      All

      If I set the following on my tableView this.table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
      then all of the columns size into the entire table space. But if I resize my window then the horizontal scrollbar on the bottom
      does not allow me to scroll. So I remove this this.table.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
      but then there is an empty column on the right of the tableView that I can't style and just stays white.

      Is there a way to style that empty column and rows in the table?
        • 1. Re: Tableview this.table.setColumnResizePolicy
          Celer
          Is there a CSS style for his column?
          • 2. Re: Tableview this.table.setColumnResizePolicy
            Sai Pradeep Dandem
            Hi,
            I tried to work on similar issue to avoid the "extra column" in the table view.
            You can refer to my blog [http://www.e-zest.net/blog/percent-width-for-tablecolumn-in-javafx-2-x-tableview/]
            I hope this can be helpful to you.

            Thanks & Regards,
            Sai Pradeep Dandem.
            • 3. Re: Tableview this.table.setColumnResizePolicy
              Celer
              Nice, your table looks good. I might try that.
              • 4. Re: Tableview this.table.setColumnResizePolicy
                Celer
                what are the css style codes for that empty column?
                • 5. Re: Tableview this.table.setColumnResizePolicy
                  Sai Pradeep Dandem
                  Hi ,
                  I think there are no specific css style classes defined in JavaFX for the extra column.

                  @All : Correct me if i am wrong.

                  Regards,
                  Sai Pradeep Dandem.
                  • 6. Re: Tableview this.table.setColumnResizePolicy
                    jsmith
                    I think there are no specific css style classes defined in JavaFX for the extra column.
                    There was a request http://javafx-jira.kenai.com/browse/RT-19450 "TableView: Styling of columns"

                    But it was withdrawn with comment:
                    "Withdrawing this as the API already exists to achieve styling of columns - through the use of cell factories set on TableColumn instances."
                    • 7. Re: Tableview this.table.setColumnResizePolicy
                      921640
                      Sai Pradeep Dandem wrote:
                      Hi,
                      I tried to work on similar issue to avoid the "extra column" in the table view.
                      You can refer to my blog [http://www.e-zest.net/blog/percent-width-for-tablecolumn-in-javafx-2-x-tableview/]
                      I hope this can be helpful to you.

                      Thanks & Regards,
                      Sai Pradeep Dandem.
                      Actually, I kinda need your help. The thing is, it scales up OK, but scaling down is not working. So, if someone re-sizes stage down CustomTableView keeps it's old width. Any tips with this?
                      • 8. Re: Tableview this.table.setColumnResizePolicy
                        Sai Pradeep Dandem
                        Hi JSmith,
                        I totally agree with you regarding the "Styling of Columns". But here the issue is about styling the "Extra Column". I think we cannot have control to the extra column cells, through the cell factory. ( As there cannot exist a cell factory for an undefined column)
                        If my understanding is wrong, let me know your views/solution.

                        Thanks & Regards,
                        Sai Pradeep Dandem.
                        • 9. Re: Tableview this.table.setColumnResizePolicy
                          Sai Pradeep Dandem
                          Hi Scekics,
                          May i am not correctly aligned with your question. Can you explain in detail or provide the code. so that I can give a try and check.
                          Because, with the code in the blog, if i resized the stage down, the table column widths are adjusted accordingly.

                          Thanks & Regards,
                          Sai Pradeep Dandem.
                          • 10. Re: Tableview this.table.setColumnResizePolicy
                            921640
                            Sure, this is the code for that particular tab, because the whole page is rather large and cumbersome. There are two customTableViews, as you can see. Their height scales up and down just fine, but width just goes up. Don't know what's the catch. The only thing I've changed in you code is that I've added an no-arguments constructor in CustomTableColumn class, because of the FXML.
                            <Tab fx:id="misljenjaPsihologaIDosijeTab" text="%psychologistOpinionsAndDossier" closable="false">
                                <content>
                                    <HBox spacing="20" fillHeight="true">
                                        <children>
                                            <TitledPane collapsible="false" text="%psychologistDossier" HBox.hgrow="ALWAYS" prefHeight="-1" maxHeight="2000">
                                                <VBox spacing="10">
                                                    <children>
                                                        <AnchorPane>
                                                            <Button AnchorPane.rightAnchor="0" text="%newEntry">
                                                                <graphic>
                                                                    <ImageView>
                                                                        <Image url="@imgs/x16/add.png"/>
                                                                    </ImageView>
                                                                </graphic>
                                                            </Button>
                                                        </AnchorPane>
                                                        <CustomTableView fx:id="tablePsiholoskiDosije" VBox.vgrow="ALWAYS" minWidth="-Infinity">
                                                            <tableView minWidth="-Infinity">
                                                                <placeholder>
                                                                    <Button text="%newEntry">
                                                                        <graphic>
                                                                            <ImageView>
                                                                                <Image url="@imgs/x32/add.png"/>
                                                                            </ImageView>
                                                                        </graphic>
                                                                    </Button>
                                                                </placeholder>
                                                                <columns>
                                                                    <CustomTableColumn fx:id="columnPdDOE"  text="%dateOfEntry" percentWidth="20">
                            
                                                                    </CustomTableColumn>
                                                                    <CustomTableColumn fx:id="columnPdContent" text="%content" percentWidth="60">
                            
                                                                    </CustomTableColumn>
                                                                    <CustomTableColumn fx:id="columnPdAuthor" text="%author" percentWidth="20">
                            
                                                                    </CustomTableColumn>
                                                                </columns>
                                                            </tableView>
                                                        </CustomTableView>
                                                    </children>
                                                </VBox>
                                            </TitledPane>
                                            <TitledPane collapsible="false" text="%psychologistOpinions" HBox.hgrow="ALWAYS" prefHeight="-1" maxHeight="2000">
                                                <VBox spacing="10">
                                                    <children>
                                                        <AnchorPane>
                                                            <Button AnchorPane.rightAnchor="0" text="%newEntry" onAction="#addNewPo">
                                                                <graphic>
                                                                    <ImageView>
                                                                        <Image url="@imgs/x16/add.png"/>
                                                                    </ImageView>
                                                                </graphic>
                                                            </Button>
                                                        </AnchorPane>
                                                        <CustomTableView fx:id="tblMisljenjaPsihologa" VBox.vgrow="ALWAYS" minWidth="10">
                                                            <tableView minWidth="10">
                                                                <placeholder>
                                                                    <Button text="%newEntry" onAction="#addNewPo">
                                                                        <graphic>
                                                                            <ImageView>
                                                                                <Image url="@imgs/x32/add.png"/>
                                                                            </ImageView>
                                                                        </graphic>
                                                                    </Button>
                                                                </placeholder>
                                                                <columns>
                                                                    <CustomTableColumn fx:id="columnPoDOE"  text="%dateOfEntry" percentWidth="20">
                            
                                                                    </CustomTableColumn>
                                                                    <CustomTableColumn fx:id="columnPoContent" text="%content" percentWidth="60">
                            
                                                                    </CustomTableColumn>
                                                                    <CustomTableColumn fx:id="columnPoAuthor" text="%author" percentWidth="20">
                            
                                                                    </CustomTableColumn>
                                                                </columns>
                                                            </tableView>
                                                        </CustomTableView>
                                                    </children>
                                                </VBox>
                                            </TitledPane>
                                        </children>
                                    </HBox>
                                </content>
                            </Tab>
                            Edited by: scekics on 19.04.2012. 04.18
                            • 11. Re: Tableview this.table.setColumnResizePolicy
                              Sai Pradeep Dandem
                              Hi Scekics ,
                              Oh..!! you have done with FXML. I am very little familiar with FXML. :(
                              Anyway i will try to debug the code and will let you know if i come up with a solution.

                              Thanks & Regards,
                              Sai Pradeep Dandem.
                              • 12. Re: Tableview this.table.setColumnResizePolicy
                                921640
                                You don't have to sweat, really, I just wanted to know is this "a bug" or my fault. Now that I know it's my fault, I'll figure it out sooner or later.

                                Thanks!!! BTW, I'm Slavko, from the blog. :)
                                • 13. Re: Tableview this.table.setColumnResizePolicy
                                  jsmith
                                  I'll figure it out sooner or later
                                  My guess is that it is going to be later than sooner ;-) . . . could be wrong, but I don't think this is easy.
                                  ... styling the "Extra Column" ... I think we cannot have control to the extra column cells, through the cell factory. ( As there cannot exist a cell factory for an undefined column). If my understanding is wrong, let me know your views/solution.
                                  Your understanding is not wrong. I tried dumping the scenegraph and looking the extra column cells up in the scenegraph and failed miserably at that - they don't exist in the scenegraph in the way that normal column cells exist, so you can't easily style them away with a setVisible/setManaged false. I don't have a solution to this.

                                  Edited by: jsmith on Apr 19, 2012 12:10 PM
                                  • 14. Re: Tableview this.table.setColumnResizePolicy
                                    Sai Pradeep Dandem
                                    Hi Jsmith,
                                    How about this ...?
                                    As per my understandings, there is no TableCell added in the table row for that extra cell(s). So that means what ever (visible)styling we are seeing for that extra column cells are actually the styling of the rows. So if we move the default styling from row to cell and customize the row style, then we can have a desired styling for the extra cells.

                                    I had given a try with a simple table view, please check it and let me know your views.

                                    For css styling.
                                    /* Customizing the table-row-cell styling. */
                                    .myTable .table-row-cell {
                                        -fx-background-color: yellow;
                                        /* Enable the below line, if the row borders are required.*/
                                        /* -fx-background-color: -fx-table-cell-border-color, yellow; */
                                    }
                                    
                                    /* Adding the styles of table-row-cell to the table-cell */
                                    .myTable .table-cell{
                                        -fx-background-color: -fx-table-cell-border-color, -fx-control-inner-background;
                                        -fx-background-insets: 0, 0 0 1 0;
                                    }
                                    .myTable .table-row-cell:odd  .table-cell{
                                        -fx-background-color: -fx-table-cell-border-color, derive(-fx-control-inner-background,-5%);
                                        -fx-background-insets: 0, 0 0 1 0;
                                    }
                                    
                                    .myTable .table-row-cell:focused  .table-cell{
                                        -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, -fx-control-inner-background;
                                        -fx-background-insets: 0, 1, 2;
                                    }
                                    
                                    .myTable .table-row-cell:focused:odd  .table-cell{
                                        -fx-background-color: -fx-focus-color, -fx-cell-focus-inner-border, derive(-fx-control-inner-background,-5%);
                                        -fx-background-insets: 0, 1, 2;
                                    }
                                    And the table view demo is
                                    import javafx.application.Application;
                                    import javafx.beans.property.SimpleStringProperty;
                                    import javafx.collections.FXCollections;
                                    import javafx.collections.ObservableList;
                                    import javafx.scene.Scene;
                                    import javafx.scene.control.TableColumn;
                                    import javafx.scene.control.TableView;
                                    import javafx.scene.control.cell.PropertyValueFactory;
                                    import javafx.scene.layout.StackPane;
                                    import javafx.scene.paint.Color;
                                    import javafx.stage.Stage;
                                    
                                    public class ExtraColumnStying extends Application{
                                         
                                         StackPane root;
                                         
                                         @Override
                                         public void start(Stage stage) throws Exception {
                                             root = new StackPane();
                                             root.autosize();
                                             Scene scene = new Scene(root, Color.LINEN);
                                             scene.getStylesheets().add("styles/template.css"); // The above style classes are added in this css file.
                                              
                                             stage.setTitle("Extra Column Styling");
                                             stage.setWidth(700);
                                             stage.setHeight(400);
                                             stage.setScene(scene);
                                             stage.show();
                                             
                                             configureTable();
                                         }
                                    
                                         public static void main(String[] args) {
                                              Application.launch(args);
                                         }
                                         
                                            /* TableView declaration */
                                         @SuppressWarnings("unchecked")
                                         private void configureTable() {
                                              final ObservableList<MyDomain> data = FXCollections.observableArrayList(
                                                         new MyDomain("First Row","This is for check."),
                                                         new MyDomain("Second Row","This is for check.")
                                                    );
                                              
                                              TableView<MyDomain> tableView = new TableView<MyDomain>();
                                              tableView.getStyleClass().add("myTable");
                                              tableView.setItems(data);
                                              
                                              TableColumn<MyDomain, String> column1 = new TableColumn<ExtraColumnStying.MyDomain, String>("Title");
                                              column1.setCellValueFactory(new PropertyValueFactory<MyDomain, String>("name"));
                                              
                                              TableColumn<MyDomain, String> column2 = new TableColumn<ExtraColumnStying.MyDomain, String>("Description");
                                              column2.setCellValueFactory(new PropertyValueFactory<MyDomain, String>("description"));
                                              
                                              tableView.getColumns().addAll(column1, column2);
                                              this.root.getChildren().add(tableView);
                                         }
                                    
                                            /* Domain Object required for TableView */
                                         public class MyDomain{
                                              private SimpleStringProperty name = new SimpleStringProperty();
                                              private SimpleStringProperty description = new SimpleStringProperty();
                                              MyDomain(String name, String desc){
                                                   this.name.set(name);
                                                   this.description.set(desc);
                                                   
                                              }
                                              public MyDomain(String desc){
                                                   this.description.set(desc);
                                              }
                                              public MyDomain(){}
                                              
                                              public String getDescription() {
                                                 return description.get();
                                             }
                                             
                                             public SimpleStringProperty descriptionProperty(){
                                                  return description;
                                             }
                                             
                                             public String getName() {
                                                 return name.get();
                                             }
                                             
                                             public SimpleStringProperty nameProperty(){
                                                  return name;
                                             }
                                    
                                         }
                                    }
                                    By playing more with the css styling i think we can get the desired behavior. :) What you say ?

                                    Regards,
                                    Sai Pradeep Dandem.
                                    1 2 Previous Next