CODEWITHSUNDEEP
sapui5
cf.codings
cf.codings

Reputation: 21

How to set the input of a combobox to read-only

In one of my UI5-Dialogs, I implemented a combobox which is invisible when the screen is initially loaded. In the method onAfterRendering, I start with setting the input to read-only:

onAfterRendering: function(oEvent) {
  var oShovel = this.getView("View0200").byId("comboShovel");
  oShovel.$().find("input").attr("readonly", true);
  this.setVisibleByListKey();
},

After this the method setVisibleByListKey is called, the property visibleShovel will be set to false.

setVisibleByListKey: function(oEvent) {
  var oModel = this.getView("View0200").getModel("Data0200");
  this.setVisibleByListKey1(oModel);
  // ...
},

setVisibleByListKey1: function(oModel) {
  oModel.setProperty("/visibleShovel", false);
},

The property is bound to the attribute visible on my combobox. Because of this behavior, the method onAfterRendering will be called again, the attribute readonly is not available (because of invisibility).

<ComboBox id="comboShovel"
  editable="true"
  enabled="true"
  visible="{Data0200>/visibleShovel}"
  valueState="None"
  change=".changeCombo">
  <items>
    <core:Item text="Ja" enabled="true" key="0" />
    <core:Item text="Nein" enabled="true" key="1" />
    <core:Item text="Nicht erforderlich" enabled="true" key="2" />
  </items>
</ComboBox>

I tried to call the set method in onInit or onBeforeRendering but at this time the input attributes can not be changed (because of invisibility again).

So how can I set the input of the combobox to read-only when I set the named visible property?

Upvotes: 1

Views: 4054

Answers (2)

cf.codings
cf.codings

Reputation: 21

Solution would be either to use sap.m.Select or to implement a "change" event handler for the sap.m.Combobox and use a coding similar to this sample:

handleChange: function(oEvent) {
  var oValidatedComboBox = oEvent.getSource();
  var sSelectedKey = oValidatedComboBox.getSelectedKey();
  var sValue = oValidatedComboBox.getValue();
  if (!sSelectedKey && sValue) {
    oValidatedComboBox.setValueState("Error");
    oValidatedComboBox.setValueStateText("Please enter a valid country!");
  } else {
    oValidatedComboBox.setValueState("None");
  }
},

Upvotes: 1

futu
futu

Reputation: 897

Instead of using jquery, use UI5 control's methods and properties:

The sap.m.ComboBox borrows the following two methods from sap.m.InputBase:

setEditable

setEnabled

or since you are using property binding for the visibility, do the same for the editable property, e.g. {Data0200>/editableShovel}

Upvotes: 0

Related Questions