How do I know when the user has selected all rows in a sap.m.Table

Question

I am using a sap.m.Table which is bound to an OData model. I have set growing="true" and growingScrollToLoad="true". This way the UI only fetches 20 rows at a time as the user scrolls down. I am also using the table in multi selection mode, so the user can select some (or all rows using the "select all" checkbox). All this is working as expected.

I am now adding an export to Excel functionality, and I see that when the user selects the "select all" checkbox, only the rows that are on the client are selected. So for example, if the user doesnt scroll after the data is fetched, only the first 20 rows are selected even if there are a hundred records in the back end. My plan is to get all data from the backend and export it to a spreadsheet if the "select all" is checked, if not just export the selected rows. Question is how do I know when the select all is checked? I havent found an API that gives me this information. Is there a better way of achieving this? I would love to hear your thoughts.

Thanks.

Answer 1

You can add a selection event listener on your table: <Table selectionChange=".onSelectionChange">

The parameter selectAll will be true if the header checkbox is checked, undefined otherwise.

onSelectionChanged: function(event) {
    var selectAll = event.getParamerter("selectAll") === true;
}

Answer 2

You can define combobox in the xml:

<ComboBox id="comboBoxSelectAll">
   <core:Item id="sellectAll" text="Select all" key="All" />
   <core:Item id="sellectNotAll" text="Select not all" key="notAll" />                          
</ComboBox>

You can register combo box event handler in the controller:

var comboBoxSelectAll = this.getView().byId("comboBoxSelectAll");
comboBoxPerc.attachSelectionChange(this.comboBoxSelectAllchanged, this);

And handle event in the controller:

comboBoxSelectAllchanged: function(oEvent){
   var key = oEvent.getParameters().selectedItem.getKey(); 

   if (key === "selectAll"){
      //save all data
   }
   else{
      //save just loaded data
   }
}

I hope this is what you are looking for, if not feel free to ask.

EDITED 10:10 130117:

Sorry now I see you are using Check Box, so in the xml:

<VBox>
    <CheckBox id="checkBoxAll" text="Select all"/>      
</VBox>

And in the function where you save data you use Check Box method getSelected:

var oCheckBoxAll = this.getView().byId("checkBoxAll");    
var bIsSelected = oCheckBoxAll.getSelected();    

if(bIsSelected === true){
   //save all data
}

EDITED 10:14 130117:

Here is working example in jsbin.

Answer 3

The selectionChange event fired by the table has a listItems parameter. If the length is more than 1, then the select all button was pressed. To determine whether all rows were selected or deselected, you can check the selected parameter of the same event.

onSelectionChanged: function(oEvent) {
    //this will return true if more than 1 item was selected
    var bSelectAll = oEvent.getParameter("listItems").length > 1
    //this will return true if the rows were selected, false if they were deselected
    var bSelected = oEvent.getParameter("selected");
    if (bSelectAll && bSelected) {
        //make a call to the backend to get all data
    }
}

You can also check the number of selected items vs the number of items in the table. oTable.getItems().length will indicate how many items are currently in the table. Comparing the number of items in the table vs the number of selected items, will tell you if all are selected.

var bAll = oTable.getSelectedItems().length === oTable.getItems().length;

For further validation, you can use the $count function of your oData service to find the total number of items in the backend, and then compare that with your table data.

var total;
oModel.read("/EntitySet/$count", {
    success: function(response) {
        total = response;
    }
}

The table also has a growingFinished event you can use to determine if all rows have been retrieved from the backend or not.