1

I want to remove the check box which enables selecting all items from the table (sap.m.Table).

I tried:

var oTable = this.byId('MyTableId');
oTable._getSelectAllCheckbox().setVisible(false);

It didn't work for me. Is there a way to set it false in XML? I know I can use CSS but I want to use CSS only if there is no other solution.

0

2 Answers 2

1

sap.m.Table

(aka. Responsive Table)

Currently, there is no publicly documented API to enable/disable showing the "Select All"-CheckBox on sap.m.Table. Best practice in this case is to extend the control and to switch the bPreventMassSelection state accordingly.

Here is a snippet from the sample: https://embed.plnkr.co/pnpdRK7d7CxZXZ8s

sap.ui.define([
  "sap/m/Table",
  "sap/m/TableRenderer",
], function(Table, TableRenderer) {
  "use strict";

  return Table.extend("demo.control.MyResponsiveTable", {
    metadata: {
      properties: {
        showSelectAll: {
          type: "boolean",
          bindable: true,
        },
      },
    },

    setShowSelectAll: function(bValue) {
      this.bPreventMassSelection = !bValue;
      this.setProperty("showSelectAll", bValue);
      return this;
    },

    renderer: TableRenderer,
  });
});
<demo:MyResponsiveTable xmlns:demo="demo.control"
  showSelectAll="{/showSelectAll}"
  mode="MultiSelect">

Compared to _getSelectAllCheckbox, the above approach should be favored since:

  • _getSelectAllCheckbox is a private method.
    • Private methods are not intended to be used outside of the control definition.
    • Relying on private methods and/or manipulating the internal control (CheckBox) will break the app in future UI5 releases.
  • The bPreventMassSelection on the other hand is a simple flag which is already used widely in other controls that rely on sap.m.Table/.List internally. We can see that Table skips rendering the "Select All"-CheckBox if bPreventMassSelection is enabled.

sap.ui.table.Table

(aka. Grid Table)

In case someone was looking for the solution but with sap.ui.table.Table, set the enableSelectAll property to false:

<table:Table xmlns:table="sap.ui.table"
  enableSelectAll="false"
  selectionMode="MultiToggle">
-1

oTable._getSelectAllCheckbox().setVisible(false); worked as expected for me. I've added it as follows:

this._myDelegate = {
    onAfterRendering: function () {
        if (typeof this._getSelectAllCheckbox === "function" && this._getSelectAllCheckbox().isA("sap.m.CheckBox")) {
            this._getSelectAllCheckbox().setVisible(false);
        }
    }
};
oTable.addEventDelegate(this._myDelegate, oTable);
// Remove this._myDelegate from the table in `onExit` to avoid memory leak

Make sure you have the right table control on var oTable = this.byId("MyTableId");.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.