Table visibleRowCountMode Auto does not work as expected

[Former Member]

Hi all,

i am new to UI5. I want to create a table that fills the size of the surrounding container.

      createContent : function(oController) {
                      //Define some sample data 
                      var oData = {
                                          root:{
                                                    name: "root",
                                                    description: "root description",
                                                    checked: false,
                                                    0: {
                                                              name: "item1",
                                                        description: "item1 description",
                                                        checked: true,
                                                              0: {
                                                                        name: "subitem1-1",
                                                            description: "subitem1-1 description",
                                                            checked: true,
                                                                        0: {
                                                                                  name: "subsubitem1-1-1",
                                                                                description: "subsubitem1-1-1 description",
                                                                                checked: true
                                                                        },
                                                                        1: {
                                                                                  name: "subsubitem1-1-2",
                                                                                description: "subsubitem1-1-2 description",
                                                                                checked: true
                                                                        }
                                                              },
                                                              1: {
                                                                        name: "subitem1-2",
                                                            description: "subitem1-2 description",
                                                                      checked: true,
                                                                        0: {
                                                                                  name: "subsubitem1-2-1",
                                                                                description: "subsubitem1-2-1 description",
                                                                                checked: true
                                                                        }
                                                              }
                                                    },
                                                    1:{
                                                              name: "item2",
                                                        description: "item2 description",
                                                        checked: true,
                                                              0: {
                                                                        name: "subitem2-1",
                                                            description: "subitem2-1 description",
                                                            checked: true
                                                              }
                                                    },
                                                    2:{
                                                              name: "item3",
                                                        description: "item3 description",
                                                        checked: true
                                                    }
                                          }
                      };
                      for (var i = 0; i < 20; i++) {
                                oData["root"][2][i] = {
                                          name: "subitem3-" + i,
                                                    description: "subitem3-" + i + " description",
                                                    checked: false
                                };
                      }
                      //Create an instance of the table control
                      var oTable = new sap.ui.table.TreeTable({
                                columns: [
                                          new sap.ui.table.Column({label: "Name", template: "name"}),
                                          new sap.ui.table.Column({label: "Description", template: "description"})
                                ],
                                selectionMode: sap.ui.table.SelectionMode.Single,
                                visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Auto,
                                allowColumnReordering: true,
                                expandFirstLevel: true,
                      });
                      //Create a model and bind the table rows to this model
                      var oModel = new sap.ui.model.json.JSONModel();
                      oModel.setData(oData);
                      oTable.setModel(oModel);
                      oTable.bindRows("/root");
                      return oTable;
      }

and this is the html file:

<script type="text/javascript">
sap.ui.localResources("z_ui5_test");
var view = sap.ui.view({id: "myview1", viewName:"z_ui5_test.TableView",
                        type:sap.ui.core.mvc.ViewType.JS});
                        view.placeAt("content");
</script>
       </head  >
       <body  class="sapUiBody"   style="height:99%; width:99%">
              <div id="content" style="height:100%; width:100%"></div>
       </body>
</html>

I added a screenshot of the result. So my question is what I have to do in order to create a table that fills the size of the outer container.

Thanks in advance.

[AndreasKunz]

Hi Juri,

the height behavior of CSS is a common pitfall. 100% height only works when ALL parents are set to a certain height (at least up to a parent with fixed height set).

And by "all" I really mean including the <html> and the <body> tag. And including the View which is between the "content" div and the Table.

So actually I'd say you do not need to add a Panel around your TreeTable, just try

  view.setHeight("100%");

  view.displayBlock(true); // might not yet be available in your version

and add the following style:

html, body {

   margin: 0;

   height: 100%;

}

If it does not work, check all the elements leading down to your Table in the browser's developer tools.

Regards

Andreas

[muellinho]

Hi Juri,

it doesn't work, because you didn't set any container Element around your tree Table,

add following code and you can see that it works:

var oPanel = new sap.ui.commons.Panel( {
            height: "1000px",
            content: [ oTable ]
} );

and instead of returning oTable now, you return oPanel:

return oPanel;

if you change the height Parameter of the Panel, you can see that your TreeTable adapts to it.

Regards,

Jan

[Former Member]

Hi Jan,

thanks for your reply. The Panel works, but only if I pass the height as pixel not as percentage.

I tried other layouts before like AbsoluteLayout and BorderLayout. Both did not worked. Do you know why?

[muellinho]

Hey,

sorry but I don't know why that doesn't work.

Though I think you should try Andreas' solution.

Greets,

Jan