Hi,
I have created a content type in the backend service and linked that with a Master Detail view in the Views service.
I got one of my custom fields to be represented as a group of radio buttons, which work as expected from a UI perspective and are linked to the right backend field, however both with create/edit nothing is saved in this field.
Other text fields can be populated/edited just fine, but the one represented by the radio buttons remains empty.
Is this a bug or am I missing something?
Best,
Jean-Marc
3 Answers, 1 is accepted
I reviewed the described behaviour and indeed this is a bug. To fix it you would have to modify the respective page index.js file. The radio buttons in your .html template would look similar to this:
<
li
class
=
"form-content-item"
>
<
label
id
=
"radioField"
class
=
"field km-listview-label field--radio"
>
<
span
class
=
"field__label"
data-bind
=
"text: strings.formView.formViewModel.editableListForm2.radio.title"
></
span
>
<
input
id
=
"radio"
data-bind
=
"checked: addFormData.group1"
name
=
"group1"
type
=
"radio"
value
=
"radio1"
>
</
label
>
</
li
>
<
li
class
=
"form-content-item"
>
<
label
id
=
"radio1Field"
class
=
"field km-listview-label field--radio"
>
<
span
class
=
"field__label"
data-bind
=
"text: strings.formView.formViewModel.editableListForm2.radio1.title"
></
span
>
<
input
id
=
"radio1"
data-bind
=
"checked: addFormData.group1"
name
=
"group1"
type
=
"radio"
value
=
"radio2"
>
</
label
>
</
li
>
The View model variable addFormData.group1 would be populated with the value of the checked radio button ("radio1" or "radio2", depending on which radio button is checked). You may find detailed documentation on this widget here.
In you index.js you will find the "onShow" event which will look similar to this and add "group1" variable to the addFormData as it is missing:
parent.set(
'onShow'
,
function
_onShow() {
var
that = parent;
that.set(
'addFormData'
, {
radio1:
''
,
radio2:
''
,
dropdownlist:
''
,
group1:
''
/// start add form data init
/// end add form data init
});
/// start add form show
/// end add form show
});
Then change the saveModel() function in index.js in the following way:
function
saveModel(data) {
/// start add form data save
addModel.RadioValue = addFormData.radio1;
// This is the generated code. REMOVE it.
addModel.RadioValue = addFormData.radio2;
// This is the generated code. REMOVE it.
addModel.RadioValue = addFormData.group1;
// This line should be added.
addModel.Name = addFormData.dropdownlist;
/// end add form data save
var
dataSource =
new
kendo.data.DataSource(dataSourceOptions);
dataSource.add(addModel);
dataSource.one(
'change'
,
function
(e) {
// datasource operation finished
app.mobileApp.hideLoading();
app.showNotification(
'Saved'
);
});
dataSource.one(
'error'
,
function
(error) {
showErrorMessage(error.xhr || error);
});
dataSource.sync();
};
The lines in red in my case should be removed, while the line in green is added. Basically the addModel.RadioValue (where RadioValue is the field in your backend that will hold the radio button data - it will be called differently in your case) should get the value of group1 variable.
Please note that the used variables group1, radio1, radio2 are the names used in my sample project. In yours, they would be called differently.
Also note that as this modifications are done outside the CUSTOM CODE blocks, you should not make further changes to that View using the Views service, as these modifications would be overwritten by the automatically generated code.
Please accept our apologies for any inconveniences this bug has caused. I have notified the responsible unit so that it is fixed.
If you need further help making the above changes, please send you project to help with the modifications.
Regards,
Martin
Telerik by Progress
Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.
Hi Martin,
Thanks this worked well for adding elements.
I've tried to follow a similar approach to fix the edit view, but didn't succeed. What needs to be done there?
Best,
Jean-Marc
Can you share some code and/or describe what you have done in the edit view that does not work?
For example:
- do you not see the current item properties bound to the view and respectively to the radio buttons
- do you have problems with the state of the radio buttons
- do you have problems with the update operation to the database
- etc.
Usually binding the radio button to the UI will allow you to monitor the changes of the checked state of the button in your app and if needed, update the data model and send it to the backend. The same approach as suggested before should work in the edit view given that in the editViewModel you are handling the changed and have a property to which the radio buttons are bound.
You can see a demo for checkboxes and radio buttons here.
I hope this helps.
Regards,
Anton Dobrev
Telerik by Progress
Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.