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

[Austin]

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.

[Daniel]

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

 

 

[Austin]

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!