Editable List View - Toggle Switches

4 posts, 0 answers
  1. Tim
    Tim avatar
    8 posts
    Member since:
    Nov 2014

    Posted 28 Mar Link to this post

    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.

     

  2. Tsvetina
    Admin
    Tsvetina avatar
    1876 posts

    Posted 31 Mar Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. Tim
    Tim avatar
    8 posts
    Member since:
    Nov 2014

    Posted 01 Apr in reply to Tsvetina Link to this post

    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.

  4. Tim
    Tim avatar
    8 posts
    Member since:
    Nov 2014

    Posted 01 Apr Link to this post

    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.
Back to Top