JavaFx: How to implement dynamic Gridpane?

Question

I am developing an application in JavaFx in which I've two tabs.

In first Tab I've ComboBox:

In Second Tab I've Gridpane like this:

What I want is when user choose let say 3 from Tab A's combobox like:

It should add 3 rows to the Gridpane of Tab B and each column with textfields, checkboxes and datepicker. Column A having Textfields, column B having Checkboxes and column C having DatePicker like this:

Please help me how can I achieve this and after achieving how can I access the data of each Textfield, checkboxes and datepicker.

Update: Trying to do @Yahya solution with FXML

Main.java

public class Main extends Application {
    @Override
    public void start(Stage primaryStage) {
        try {
            TabPane root = (TabPane)FXMLLoader.load(getClass().getResource("Sample.fxml"));
            Scene scene = new Scene(root,400,400);
            scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());
            primaryStage.setScene(scene);
            primaryStage.show();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) {
        launch(args);
    }
}

SampleController.java

public class SampleController {

    @FXML
    private TabPane root ;
    @FXML
    private Tab tabA ;
    @FXML
    private Tab tabB ;
    @FXML
    private ComboBox comboBox ;
    @FXML
    private static GridPane gridPane ;
    @FXML
    private AnchorPane anchB ;


public void initialize() {

    // Create a comboBox, set its attributes and add it to container
    comboBox.getItems().addAll(1,2,3,4,5,6,7,8,9,10);
    comboBox.setValue(1);
    comboBox.setEditable(false);
   // anchA.getChildren().add(comboBox);

    // add listener to tabPane
    root.getSelectionModel().selectedItemProperty().addListener(new ChangeListener(){
         @Override
         public void changed(ObservableValue observable, Tab oldTab, Tab newTab){
              if(newTab == tabB) { // when tabB is selected
                  System.out.println(anchB.getChildren().size());
                  if(anchB.getChildren().size()<=0){ // if already contains a table

                      anchB.getChildren().add(table(comboBox.getValue())); 

                      table(comboBox.getValue());
                      System.out.println("hello");
                  }
                  else {
                  anchB.getChildren().remove(gridPane); // remove it
                  System.out.println("no");
                  }
            }
       }   
   });
}

//This static method shall create the table dynamically when it's called
// you can add, change and remove the attributes of the table components
// the colors and all other decoration(e.g. position) are for example
public static GridPane table(int rows){

    for(int i=0; i



Sample.fxml

JavaFx: How to implement dynamic Gridpane?

1 Answers