input box not updating when checkbox is selected sapiu5
Question
I created a table in Web IDE that has a checkbox and input box that by default shows "100%" when checkbox is selected. It was working before I added data from a json but now that I made the column list item a template taking in data from the json on some of the columns, the input box does not fill in when selecting checkbox.
What shows up now:
What I want to show up:
If I use something like message box, it does the correct output when selecting checkbox.
sap.m.MessageBox.alert("100%")
sap.m.MessageBox.alert("0%")
I binded the event to the checkbox under select. This is the code for the checkbox.
percentCheck: function(oEvent) {
//inputText is the input Text box
var inputText = this.getView().byId("inputPercent");
var isSelected = oEvent.getParameter("selected");
if (isSelected) {
inputText.setValue("100%");
} else {
inputText.setValue("");
}
}
2 answers
solution1
0 ACCPTED 2018-01-17 07:06:52
I think that it is better to update the model and not change the value of the control directly. here is an example http://jsbin.com/yuhipop/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: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="Checkbox"/>
<table:template>
<CheckBox selected="{selected}"
select="checkBoxChanged"/>
</table:template>
</table:Column>
<table:Column>
<Label text="Bonus"/>
<table:template>
<Input value="{bonus}"
change="inputChanged"/>
</table:template>
</table:Column>
</table:columns>
</table:Table>
</mvc:View>
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
view
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", selected: true, bonus: "100%" },
{ name : "Mary", "company": "abc inc", selected: true, bonus: "100%" },
]));
},
inputChanged: function(oEvent) {
var cxt = oEvent.getSource().getBindingContext();
var obj = cxt.getObject();
obj.selected = (obj.bonus === '100%');
},
checkBoxChanged: function(oEvent) {
var cxt = oEvent.getSource().getBindingContext();
var obj = cxt.getObject();
if (obj.selected) {
obj.bonus = '100%';
}
},
});
return oController;
});
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
solution2
0 2018-01-17 19:35:18
This is what I was able to use to make it work with data
View:
<CheckBox id="checkEstimate" select="estimatePercentageSelect"/>
<Input value="{percent}" width="100%" id="inputPercent"/>
Controller:
estimatePercentageSelect: function(oEvent) {
//get parameter if checkbox is selected
var isSelected = oEvent.getParameter("selected");
//get source to bind
var cxt = oEvent.getSource().getBindingContext();
//if checkbox is selected, set property "percent" to 100%
if (isSelected) {
cxt.getModel().setProperty("percent","100%",cxt);
}
else{
cxt.getModel().setProperty("percent",null,cxt);
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.