This is a migrated thread and some comments may be shown as answers.

Views service: radio button selection not saving

3 Answers 148 Views
Report a bug
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Jean-Marc
Top achievements
Rank 1
Jean-Marc asked on 05 Mar 2017, 07:30 PM

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

Sort by
0
Martin
Telerik team
answered on 08 Mar 2017, 09:04 PM
Hi Jean-Marc,

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.

 
0
Jean-Marc
Top achievements
Rank 1
answered on 17 Mar 2017, 05:29 PM

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

0
Anton Dobrev
Telerik team
answered on 22 Mar 2017, 11:08 AM
@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.

 
Tags
Report a bug
Asked by
Jean-Marc
Top achievements
Rank 1
Answers by
Martin
Telerik team
Jean-Marc
Top achievements
Rank 1
Anton Dobrev
Telerik team
Share this question
or