on 09-12-2014 10:02 AM
Hi,
I have table with in each row an input field and a slider (and much more)...
I want to change the value of the input field by changing the slider (liveChange).
I get the value from the liveChange event but I'm able to get the row.
Here is my code:
<ColumnListItem>
<cells>
<ObjectIdentifier title="{Description}" />
<Input value="{Placeholder}" />
<Slider
value="50"
width="100%"
liveChange="onChangeSlider"
change="onChangedSlider" />
</cells>
</ColumnListItem>
onChangeSlider: function(evt) {
var value = evt.getSource().getValue();
console.log('value has been changed: ' + value);
var currentRow = $(evt).closest('tr');
console.log(currentRow.id); // I'm just getting "undefined"
},
Thanks in advance
Matt
Hi Matthieu
If you bind the slider and text to the same value in this manner, then the text will be updated accordingly.
Thanks
-D
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
I think the issue is that the ODataModel by default binding is one-way, where as the JSON model is two way.
https://sapui5.hana.ondemand.com/sdk/#docs/guide/91f0df546f4d1014b6dd926db0e91070.html
If you use the setDefaultBindingMode, does it make any difference?
oModel.setDefaultBindingMode(sap.ui.model.BindingMode.TwoWay);
https://sapui5.hana.ondemand.com/sdk/#docs/guide/91f191d26f4d1014b6dd926db0e91070.html
Regards,
Jason
Hi Jason,
Thanks for your help.
I've tried it with the northwind.svc but it doesn't work.
Here is it:
JS Bin - Collaborative JavaScript Debugging
Any idea why?
Best,
Matt
Hi Jason,
I've updated my JSBin (JS Bin - Collaborative JavaScript Debugging).
1. Now it works with twoWayBinding but the input is updated only after the "change" event.
The slider control has 2 different events:
I want to update the value of the input field after the "liveChange" event like it is possible when you are using JSON file (Here an example).
2. It works only if I click on the slider but as sson as I slide, the value is not updated. Any idea why?
3. I'm using the slider in a table and unfortunately, the binding works only for the first aggregation. Why are the others aggregations not working?
Thanks for any help.
Best
Matt
Hi Matthieu,
As dennis explained, thats the better approach,
while as in your code regarding utilization of the .closest method,
have a look into the http://api.jquery.com/closest/ documentation,
Get the first ancestor element that matches the selector, beginning at the current element and progressing up through the DOM tree.
You need to move up with .closest('tr') and then drill down to find the input with .find('columnId') then get the value.
var val = $(this.target).closest('tr').find('columnId').val();
if you want to fetch the name of that paticular row and its corresponding value we have an inbuilt methods in sapui5.
var value1 = oEvent.getSource().getBindingContext().getObject();
console.log(value1.name);
regards,
Nagarjun
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
Hi Matthieu,
You can get the component by id in the controller with this.getView().byId("componentName"). Also add componentName into the XMLView.
<Input id="inputComponent" />
onChangeSlider: function(evt) {
var input = this.getView().byId("inputComponent");
var value = evt.getSource().getValue();
input.setValue(value);
},
Note that doing it this way you'd probably have to implement listener for the Input control also, in case it is editable. Another way would be to use MVC and change the Model on Input and Slider change handlers. View (Input + Slider) could then be binded to the model directly.
Regards,
Kimmo
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
84 | |
25 | |
12 | |
9 | |
6 | |
6 | |
5 | |
5 | |
4 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.