0

Im facing a challenge in developing an app using sap.ui.table.Table. Im not able to get complete rows data using table.getRows()

Im getting 100 records from odata Service. For table binding im using visibleRowCount="10". So that i will see only 10 records initially and by scroll we can see remaining rows.

Now i want to do some data and CSS manipulations while loading the data. So i have to get the complete rows info.

For data manipulations i can play using sap.ui.model.json.JSONmodel. But for CSS manipulations i have to get complete rows Data.

NOTE :: If i remove visibleRowCount property then i can get complete rows info. But Table column Headers will not be fixed, If we scroll down then we will not see Table Column Headers. So i cannot do that.

Below is my code..

<Table id="uiTable" selectionMode="None" rows="{tableModel>/Sheet1}" visibleRowCount="10">
                            <columns>
                                <Column width="5rem" filterProperty="Project" hAlign="Center">
                                    <m:Label text="Project"/>
                                    <template>
                                        <m:Text text="{tableModel>Project}" wrapping="false"/>
                                    </template>
                                </Column>
                                <Column hAlign="Center" width="5rem" filterProperty="State">
                                    <m:Label text="State"/>
                                    <template>
                                        <m:Text text="{tableModel>State}" wrapping="false"/>
                                    </template>
                                </Column>
                                <Column width="5rem">
                                    <m:Label text="Region"/>
                                    <template>
                                        <m:Text text="{tableModel>Region}" wrapping="false"/>
                                    </template>
                                </Column>
                            </columns>
                        </Table>

    

    var tableModel = this.getOwnerComponent().getModel("tableModel");
            this.getView().setModel(tableModel, "tableModel");
    
            var table = this.getView().byId("uiTable");
            var tableLength = tableModel.getData().Sheet1.length;
            var tableData = tableModel.getData().Sheet1;
            var aRows = table.getRows();

table.onAfterRendering = function () {
                sap.ui.table.Table.prototype.onAfterRendering.apply(this, arguments);
                for (var i = 0; i < tableLength; i++) {
                    if (tableData[i].Region === "AP") {
                        var pRow = aRows[i];
                        $("#" + pRow.getId() + "-col" + i).addClass("mystyle");
                    }
                }
            }

Can someone please help me how can i get complete rows info using table.getRows() along with visibleRowCount property in XML?

Thank you in advance

user2644620
  • 199
  • 1
  • 10
  • 37
  • please describe more about "Table columns will not be fixed", that is another problem, removing visibleRowCount is correct. – York Chen Sep 30 '20 at 06:56
  • @YorkChen, Here Table Column Headers will not be fixed if i remove "visibleRowCount" property, If i scoll down i will not see Column Headers which im not expecting that behavior – user2644620 Sep 30 '20 at 07:33
  • 1
    You can make it fixed by this: https://stackoverflow.com/questions/37809148/sap-m-table-vertical-scrolling-with-fixed-header – York Chen Sep 30 '20 at 07:41
  • Here i cannot use sap.m.Table. I want to use only sap.ui.table.Table. My required functionalities like fixedColumnCount will not work in sap.m.Table – user2644620 Sep 30 '20 at 07:50

1 Answers1

0

I realize that this question is not new but perhaps it might help someone else searching for the same.

The method getRows() generally only returns the rows that are visible. However, one quick workaround that might fit some use cases is to simply bind the visibleRowCount property of the table to the model that has the table data stored and calculate the length using expression binding. This way avoids any complicated JS code and handles the calculation directly in the XML view.

visibleRowCount="{= ${tablemodel>/rows}.length }"

In this example i have stored the data for the rows inside the rows property of my JSON Model "tablemodel". Now getRows() returns all the rows which can be useful at times. In my use case, i needed to apply custom css to specific table cells and this was the only way that worked. However, it might not be the best approach for a large dataset.

Hope this helps.

Leoni Kussmaul
  • 1
  • 1