This is a migrated thread and some comments may be shown as answers.

Remove Dirty Item when error is returned

1 Answer 210 Views
Data Source
This is a migrated thread and some comments may be shown as answers.
Chad
Top achievements
Rank 1
Chad asked on 28 Feb 2015, 08:27 PM
I have a grid that is bound to a datasource. On the datasource if an error is returned on create my popup goes away and the new item stays in the grid (datasource). How do I either prevent the popup from going away and make the user cancel or try again, or remove the item if there is an error?


function getAntiForgeryToken() {
    return  $('input[name=__RequestVerificationToken]').val();
}

    var viewModelNotes = kendo.observable({
        notesDataSource: new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/Vendor/GetVendorNotes",
                    dataType: "json",
                    data: {
                        VendorId: $("#Vendor_VendorId").val()
                    }
                },
                create: {
                    url: "/Vendor/CreateVendorNote",
                    dataType: "json",
                    type: "POST",
                    data: {
                        VendorId: $("#Vendor_VendorId").val(),
                        __RequestVerificationToken: getAntiForgeryToken()
                    }
                }
            },
            schema: {
                model: {
                    id: "VendorNoteId",
                    fields: {
                        VendorNoteId: { editable: false, nullable: true }
                    }
                },
                errors: "errorMsg"
            },
            pageSize: 20,
            error: function (e) {
                toastr.options = {
                    "positionClass": "toast-bottom-full-width"
                };
                toastr.error('Unable to save new note' + e.errors, 'Uh Oh!');
            }
        })
    });

    kendo.bind($('#VendorNoteWrapper'), viewModelNotes);

    $("#VendorNotesGrid").kendoGrid({
        dataSource: viewModelNotes.get("notesDataSource"),
        scrollable: false,
        toolbar: ["create"],
        columns: [
        { field: "ItemText", title: "Note" },
        { field: "CreateDate", title: "Create Date" },
        { field: "CreatedByDisplay", title: "Created By" },
        { field: "LastModDate", title: "Modified" }],
        editable: {
            mode: "popup",
            template: kendo.template($("#vendorNoteEditor").html())
        }
    });

1 Answer, 1 is accepted

Sort by
0
Rosen
Telerik team
answered on 03 Mar 2015, 02:15 PM
Hi Chad,

In order to revert the changes when error occurs, you should use the DataSource cancelChanges method. Similar to the following:

error: function (e) {
    toastr.options = {
        "positionClass": "toast-bottom-full-width"
    };
    toastr.error('Unable to save new note' + e.errors, 'Uh Oh!');
 
    this.cancelChanges();
}

If you want to keep the editor open you will need to use the Grid's dataBinding event to prevent the widget from re-drawing and hiding the popup editor. 

error: function(e) {       
    /*..*/
 
    var grid = $("#VendorNotesGrid").getKendoGrid();
    grid.one("dataBinding", function (args) {
        args.preventDefault();
    });
}


Regards,
Rosen
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Data Source
Asked by
Chad
Top achievements
Rank 1
Answers by
Rosen
Telerik team
Share this question
or