MVVM Update not working when clicking on k-update-button

3 posts, 1 answers
  1. Austin
    Austin avatar
    19 posts
    Member since:
    Jun 2015

    Posted 14 Apr Link to this post

    I'm having some issues trying to call the update from my DataSource when the text inside a binded textarea is changed and the Save button is clicked which has the class of "k-update-button".

    I'm not sure what I'm doing wrong here.

     

    Here is my observable model:

    var sectionViewModel = kendo.observable({
            sectionId: $("#Id").val(),
            sectionDataSource: new kendo.data.DataSource({
                transport: {
                    read: {
                        url: "/policy/policy/GetSectionsByPolicyId",
                        dataType: "json",
                        type: "GET",
                        data: {
                            Id: $("#Id").val()
                        },
    update: {
                        url: "/policy/policy/SectionEdit",
                        type: "POST",
                        dataType: "json",
                        data: function (data) {
                            return kendo.getAntiForgeryTokens();
                        }
                    }
                },
                schema: {
                    model: {
                        id: "Id",
                        fields: {
                            Id: { type: "number", editable: false, nullable: true },
                            PolicyId: { type: "number", editable: false },
                            Title: { type: "string" },
                            Body: { type: "string" },
                            DisplayOrder: { type: "number", editable: false },
                            Finalized: { type: "boolean", editable: false },
                            Active: { type: "boolean", editable: false },
                            CreateDate: { type: "date", editable: false },
                            CreateByDisplay: { type: "string", editable: false },
                            LastModDate: { type: "date", editable: false },
                            LastModByDisplay: { type: "string", editable: false }
                        }
                    },
                    errors: "errorMsg"
                },
                error: function (e) {
                    toastr.options = {
                        "positionClass": "toast-bottom-full-width"
                    };
                    toastr.error("There was an error: " + e.errors, "Uh, Oh!");
                    this.cancelChanges();
                }
            })
        });
     
        kendo.bind($("#policySectionListView"), sectionViewModel);

     

    And here is the kendo editor template that I am currently using:

    <div id="policySectionListView"
         data-role="listview"
         data-template="policySectionTemplate"
         data-edit-template="policySectionEditTemplate"
         data-bind="source: sectionDataSource"></div>
     
    <script type="text/x-kendo-tmpl" id="policySectionEditTemplate">
                <div class="panel panel-default policy-section-panel" data-id="#:Id#">
                    <div class="panel-heading">
                        <div class="btn-group pull-right" style="margin-top: -10px;" role="group" aria-label="...">
                            <button id="testbutton" type="button" class="btn btn-link btn-link-alt k-update-button" data-toggle="tooltip" title="Save Changes">
                                <span class="fa fa-floppy-o"></span> Save
                            </button>
                            <button type="button" class="btn btn-link btn-link-alt k-cancel-button" data-toggle="tooltip" title="Cancel">
                                <span class="fa fa-close"></span> Cancel
                            </button>
                        </div>
                        <h3 class="panel-title">
                            #: Title #
                        </h3>
                    </div>
                    <div class="panel-body">
                        <div class="policy-section-content">
                            <input type="text" class="k-textbox" style="width: 100%" data-bind="value:Title" />
                            <textarea class="k-textbox" name="Body"
                                      data-role="editor"
                                      data-bind="value:Body"
                                      style="height: 400px;"></textarea>
                        </div>
                    </div>
                    <div class="panel-footer">
                        <div style="display: inline-block;">
                            Last Modified by #: LastModByDisplay # on #= kendo.toString(LastModDate, "G") #
                        </div>
                    </div>
                </div>
            </script>

     

    From what I have seen online, when the button with a class of 'k-update-button' is clicked then the update should be called automatically if any of the binded elements have been changed. However, that doesn't seem to be working here or I am doing something wrong.

  2. Answer
    Daniel
    Admin
    Daniel avatar
    2118 posts

    Posted 19 Apr Link to this post

    Hello,

    Indeed, the listview should automatically sync the changes if the a button with this class is clicked. Please check:
    • If there are any JavaScript errors.
    • If a request is made at all to the server when clicking the button.
    • If the Id field has non-default value. If the Id field is not assigned then the create operation will be triggered instead of update.
    I also created an example using the code that you provided. Please check it and let me know if I am missing something else.

    Regards,
    Daniel
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Austin
    Austin avatar
    19 posts
    Member since:
    Jun 2015

    Posted 19 Apr in reply to Daniel Link to this post

    Hi Daniel,

    Thanks for the example and verifying that it should be working. I went ahead and just scratched the code and rewrote it and it seems to be working fine now. I must have had a bug somewhere I just wasn't able to find.

    Thanks again!

Back to Top