Search code examples
sapui5

Deselect Radiobuttons when leaving the view via cancel button

I have a table(sap.m.table) with radiobutton control in the first column. The table shows different "prices" from which the user should be able to choose only one. My problem is, when i use the cancel button it should delete all selections made (in dropdowns, datefilter, etc.). It works for every control except radiobutton.

<ColumnListItem> <cells> 
<RadioButton id="radiobutton" groupName="tablebuttons" select="onSelect"/>.....

When i leave the view with the cancel button and then open it again in the same session, the previous selected radiobutton is still selected. I cant find any method to set it to unselected. When i use this.getView().byId("radiobutton").getSelected() it always gives back "false". Is it because there is one button for each table row and i only select (the first?) one? If so, how can i search all button for the selected one and deselect it?

Solution

  • You must have added id="radiobutton" to the template list item which is used for aggregation binding. That is why calling byId("radiobutton") does not return any rendered radio button but the template instance. If you check the IDs of the radio buttons from the HTML document, you'll notice that they all contain the generated prefix __clone0, __clone1, etc.

    I can't find any method to set it to unselected.

    To deselect a radio button, use:

    But you might not even need any sap.m.RadioButton to add manually to the table. Since sap.m.Table extends from sap.m.ListBase, it can have a radio button in each list item via mode="SingleSelectLeft". Here is a demo:

    sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/model/json/JSONModel"
], JSONModel => sap.ui.xmlview({
  async: true,
  
  viewContent: `<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    controllerName="MyController"
  >
    <Table
      mode="SingleSelectLeft"
      selectionChange=".onSelectionChange"
      includeItemInSelection="true"
      items="{prices>/}">
      <columns>
        <Column>
          <Text text="Price"/>
        </Column>
        <Column>
          <Text text="Foo"/>
        </Column>
      </columns>
      <items>
        <ColumnListItem selected="{prices>selected}" >
          <ObjectNumber number="{prices>price}" />
          <Text text="bar" />
        </ColumnListItem>
      </items>
    </Table>
    <Button
      class="sapUiTinyMargin"
      text="Deselect"
      type="Emphasized"
      press=".onResetPress"
    />
  </mvc:View>`,
  
  controller: sap.ui.controller("MyController",  {
    onInit: function() {
      const model = new JSONModel(this.createModelData());
      this.getView().setModel(model, "prices");
    },
    
    onResetPress: function() {
      const model = this.getView().getModel("prices");
      model.setProperty("/", this.createModelData());
    },
    
    createModelData: () => [{
      price: 111.01,
    }, {
      price: 222.0245,
    }, {
      price: 333,
    }],
    
  }),

}).loaded().then(view => view.placeAt("content"))));
    <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap"
  data-sap-ui-libs="sap.m"
  data-sap-ui-preload="async"
  data-sap-ui-theme="sap_belize"
  data-sap-ui-compatVersion="edge"
  data-sap-ui-xx-waitForTheme="true"
></script><body id="content" class="sapUiBody sapUiSizeCompact"></body>