Views service: radio button selection not saving

4 posts, 0 answers
  1. Jean-Marc
    Jean-Marc avatar
    17 posts
    Member since:
    May 2016

    Posted 05 Mar Link to this post

    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

  2. Martin
    Admin
    Martin avatar
    102 posts

    Posted 08 Mar Link to this post

    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.

     
  3. Jean-Marc
    Jean-Marc avatar
    17 posts
    Member since:
    May 2016

    Posted 17 Mar in reply to Martin Link to this post

    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

  4. Anton Dobrev
    Admin
    Anton Dobrev avatar
    604 posts

    Posted 22 Mar Link to this post

    @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.

     
Back to Top