CRUD operation examples for complex and array fields

2 posts, 1 answers
  1. Dan
    Dan avatar
    2 posts
    Member since:
    Jul 2014

    Posted 13 Aug 2014 Link to this post

    Hi,

    I cant find some examples that involves a CRUD operation with ObservableObject.extend with array fields.

    I'm creating a registration page that has two array fields: addresses and phones

    01.(function (global) {
    02.    var RegistrationViewModel,
    03.        app = global.app = global.app || {};
    04. 
    05.    RegistrationViewModel = kendo.data.ObservableObject.extend({
    06.        firstname: "",
    07.        middleInitial: "",
    08.        lastname: "",
    09.        nickname: "",
    10.        company: "",
    11.        userId: "",
    12.        password: "",
    13.        addresses: [],
    14.        phones: [],
    15. 
    16.        onSubmit: function () {
    17.            var that = this,
    18.                api = "https://www.local.com/api/registration",
    19.                regForm = {
    20.                    firstname: that.get("firstname").trim(),
    21.                    middleInitial: that.get("middleInitial").trim(),
    22.                    lastname: that.get("lastname").trim(),
    23.                    nickname: that.get("nickname").trim(),
    24.                    company: that.get("company").trim(),
    25.                    userId: that.get("userId").trim(),
    26.                    password: that.get("password").trim(),
    27.                    addresses: that.get("addresses"),
    28.                    phones: that.get("phones"),
    29.                };
    30.            $.ajax({
    31.               // push to service
    32.            });
    33.        }
    34.    });
    35. 
    36.    app.registrationService = { viewModel: new RegistrationViewModel() };
    37.})(window);

    My problem is that in my view I want to have a dynamic fields when the user registers they can add, update or remove those items (addresses and phones) before submitting their form.

    Here's a snippet of my view:

    01.<!-- Registration view -->
    02.<div id="registration-sec"
    03.     data-model="app.registrationService.viewModel"
    04.     data-role="view">
    05.    <form>
    06.        <h3>Register</h3>
    07.        <ul data-role="listview"
    08.            data-style="inset">
    09.            <li>
    10.                <label>
    11.                    <span>First name</span>
    12.                    <input type="text" data-bind="value: firstname" />
    13.                </label>
    14.            </li>
    15.            <li>
    16.                <label>
    17.                    <span>Last name</span>
    18.                    <input type="text" data-bind="value: lastname" />
    19.                </label>
    20.            </li>
    21.            <li>
    22.                <label>
    23.                    <span>Middile initital</span>
    24.                    <input type="text" data-bind="value: middleInitial" />
    25.                </label>
    26.            </li>
    27.            <li>
    28.                <label>
    29.                    <span>Nick name</span>
    30.                    <input type="text" data-bind="value: nickname" />
    31.                </label>
    32.            </li>
    33.            <li>
    34.                <label>
    35.                    <span>Company</span>
    36.                    <input type="text" data-bind="value: company" />
    37.                </label>
    38.            </li>
    39.            <li>
    40.                <label>
    41.                    <span>User ID</span>
    42.                    <input type="text" data-bind="value: userId" />
    43.                </label>
    44.            </li>
    45.            <li>
    46.                <label>
    47.                    <span>Password</span>
    48.                    <input type="password" data-bind="value: password" />
    49.                </label>
    50.            </li>
    51.        </ul>
    52.        <input id="submit-reg-frm"
    53.               type="submit"
    54.               data-role="button"
    55.               data-bind="click: onSubmit"
    56.               value="Sign Up"
    57.               class="login-button" />
    58.    </form>
    59.</div>

    In my onSubmit() function I can have something like this...

    regFrom = {
        // some properties here...
        addresses: that.get("addresses"),
        phones: that.get("phones")
    }

    I have two questions here...

    1. Are there any examples for this kind of scenario where in I can add, update and delete array items from the view?
    2. In the view, are there any specific data-role attribute values that I can used to handle this kind of process?

  2. Answer
    Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 18 Aug 2014 Link to this post

    Hello Dan,

    I posted my reply in the support ticket that you have opened on the same topic. For convenience, I am pasting it below:

    I can suggest to check this demo. It demonstrates how to use source binding to add and remove records. If editing should be supported as well then you could use value bound inputs in the template. Another option would be to use an editable widget as demonstrated in this demo.

    Regards,
    Daniel
    Telerik
     

    Visit the Telerik Verified Plugins Marketplace and get the custom Cordova plugin you need, already tweaked to work seamlessly with AppBuilder.

     
Back to Top