Deselect Radiobuttons when leaving the view via cancel button

1
votes

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?

2
sapui5

2 Answers

1
votes

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>
0
votes

IMO, you should use a model to set/reset values and not called the setter function of control. here is an example of using MVC http://jsbin.com/zijajas/edit?html,js,output

<!DOCTYPE HTML>
<html>

  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="UTF-8">
    <title>MVC</title>
    <script id="sap-ui-bootstrap" type="text/javascript"
            src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
            data-sap-ui-theme="sap_bluecrystal"
            data-sap-ui-libs="sap.m,sap.ui.table"
            data-sap-ui-xx-bindingSyntax="complex">
    </script>

    <script id="oView" type="sapui5/xmlview">
    <mvc:View height="100%" controllerName="myView.Template"
      xmlns="sap.m" 
      xmlns:core="sap.ui.core"
      xmlns:mvc="sap.ui.core.mvc"
      xmlns:table="sap.ui.table">

    <table:Table id="Table1" rows="{/}"
      selectionMode="None">
      <table:title>
      <Button icon="sap-icon://reset" press="reset" />
      </table:title>
      <table:columns>
        <table:Column>
        <Label text="Employee name"/>
        <table:template>
          <Text text="{name}" ></Text>
        </table:template>
        </table:Column>
        <table:Column>
          <Label text="Company"/>
          <table:template>
            <Text text="{company}"></Text>
          </table:template>
        </table:Column>
        <table:Column>
        <Label text="Radio"/>
        <table:template>
          <RadioButtonGroup selectedIndex="{radio}">
            <RadioButton text="no" />
            <RadioButton text="yes" />
          </RadioButtonGroup>
        </table:template>
        </table:Column>
        <table:Column>
        <Label text="Bonus"/>
        <table:template>
          <Input value="{bonus}" />
        </table:template>
        </table:Column>
      </table:columns>

    </table:Table>
  </mvc:View>
    </script>

  </head>

  <body class="sapUiBody sapUiSizeCompact" role="application">
    <div id="content"></div>
  </body>

</html>

controller

sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, JSONModel) {
"use strict";

var oController = Controller.extend("myView.Template", {
  onInit: function(oEvent) {
    this.getView().setModel(new JSONModel([{
      name : "John",
      company: "apple inc",
      radio: 0,
      bonus: "0"
    }, {
      name : "Mary",
      company: "abc inc",
      radio: 0,
      bonus: "0"
    },
    ]));
  },
  reset: function() {
    var oModel = this.getView().getModel();
    oModel.getProperty('/').forEach(function(item) {
      item.radio = 0;
      item.bonus = 0;
    });
    oModel.refresh();
  }
});

return oController;
});

var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});

oView.placeAt('content');