Editable List View - Toggle Switches

[Tim]

Hi there! I'm in the process of making a very simple app that collects some data and send it to our database. To collect the data, I am using an editable list view create screen to get answers to a series of questions, most of which are Yes/No questions. I also have a few text input boxes. The form will send the data with just the text fields and one of the toggle switches on the form, but as soon as I go to add the rest of the toggles for the Yes/No questions, the app stops working and will no longer send the data. I have 4 text fields, followed by 8 Yes/Mo (true/false) fields, and then one more text field. I am simply building this using the Views service of the AppBuilder.

We are also using Progress OpenEdge to expose the data as REST and talk to the app to get and receive the data.

I'm sure I'm making a simple mistake, any help would be appreciated.

 

[Tsvetina]

Hi Tim,

Without looking at your code, it is hard to determine what causes the issue. The best way to collect and pass data in a Kendo UI Mobile Application is to bind all your form fields to the model and then, just get the needed values from the model and pass them to your server.  For example:

HTML:

<div data-role="view" data-title="Home View" data-layout="main" data-model="app.home" data-show="app.home.onShow" data-after-show="app.home.afterShow">
    <input data-bind="value: data.field1" /><br />
    <input data-role="switch" data-bind="value: data.field2" /><br />
    <input data-role="switch" data-bind="value: data.field3" /><br />
    <input data-role="switch" data-bind="value: data.field4" /><br />
    <input data-bind="value: data.field5" /><br />
    <a data-role="button" data-bind="events: {click: submit}">Submit</a>
</div>

​JS:

'use strict';

app.home = kendo.observable({
    onShow: function () { },
    afterShow: function () { },
    data: {
        field1: "default value",
        field2: false,
        field3: true,
        field4: true,
        field5: "default value"
    },
    submit: function () {
        var data = this.get("data");

        alert("Field1: " + data.field1 + "; field2: " + data.field2 + "; field3: " + data.field3 + "; field4: " + data.field4 + "; field5: " + data.field5);
    }
});

You can also find a sample project demonstating this approach attached to this thread.

Regards,
Tsvetina
Telerik

[Tim]

I believe that is what we are doing, but when the form is submitted, it is not passing the value of the switches. We want to use these switch controls:

    <label><span>Any mispicks found?</span>
                    <input data-role="switch" data-bind="value: addFormData.mispicks" id="mispicks"/>
    </label>

But OpenEdge refuses to take the true/false values from the switches, and the form doesn't submit at all. Our workaround was to use a drop-down instead:

     <label><span>Liquids upright</span>
                        <select data-bind="value: addFormData.liquidsUpright" data-role="dropdownlist">
                        <option value="true">Yes</option>
                            <option value="false">No</option>
                        </select>
      </label>

When we do it this way, OpenEdge is pleased to receive all of the values, but we don't like the look or the inconvenience of having to use many drop downs.

We are using a Progress Data Provider in our application. Pretty much all of the code is automatically generated code from building it within the Views service. If this is not enough information, I could send you some of the files from the application.

[Tim]

I resolved my issue. I didn't realize that the value where not initialized, so I went and added some default values and the app runs swimmingly. I knew the issue was something simple! Thanks for the help.