kendo window close reloads page sometimes (inconsistently)

I am trying to to bind a simple kendo window open and close functionality in my application.

The following is the HTML template:

<div id="edit-user-window">
    <div class="container">
        <div class="row">
            <div class="col-md-10">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="firstname">First Name</label>
                        <input type="text" name="firstname" class="form-control" data-bind="value: editUser.FirstName">
                    </div>
                    <div class="form-group">
                        <label for="email">Email</label>
                        <input type="email" name="email" class="form-control" data-bind="value: editUser.Email" required>
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                    <button class="btn btn-default" data-bind="click: cancelEdit">Cancel</button>
                </form>
            </div>
        </div>
    </div>
</div>

Data bindings are done in this fashion

function Model(app, popUp) {
    var ko = kendo.observable({
        self: this,
        dataSrc: null,
        editUser: {},
        init: function () {
            // Set up data source
            self.dataSrc = new kendo.data.DataSource({
                data: [],
                transport: {read: {url:, dataType:}},
                schema: {
                    model: { Name: "FirstName", Email: "Email"}
                }
            });

            // Define the user table
            $("#userGrid").kendoGrid({
                dataSource: self.dataSrc,
                columns: [
                    { field: 'FirstName', title: 'Name' },
                    { field: 'Email', title: 'Email' },
                    {
                        field: 'Operations',
                        width: "152px;",
                        command: [
                            {
                                name: 'edit',
                                template:"<a class='k-grid-edit' href='#' style='border-right:1px solid black;padding:5px;'>Edit</a>",
                                click: function (e) {
                                    e.preventDefault();
                                    $("#edit-user-window").data("kendoWindow").center().open();
                                    var tr = $(e.target).closest("tr");
                                    self.set("editUser",this.dataItem(tr));
                                }
                            }
                        ]
                    }
                ]
            });

            $("#edit-user-window").kendoWindow({
                width: "80%",
                height: "80%",
                title: "Edit User",
                visible: false,
                actions: [
                    "Close"
                ]
            });
        },
        cancelEdit: function (e) {
            $("#edit-user-window").data("kendoWindow").center().close();
        },
    });

    return ko;
}

When I close the window using the cancelEdit function on button click, the window sometimes gracefully closes and sometimes the whole page refreshes. There are no helpful log messages to debug the problem. Since this will be a one-page application, reloads are not tolerable.

Potential issue might have something to do with that each row in the kendogrid having an edit operation.

PS: I am a kendo newbie so the approach maybe flawed.

If you put button element into form it default sends this form when you click it. To prevent it add type="button" attribute to your cancel button.

<button class="btn btn-default" type="button" data-bind="click: cancelEdit">Cancel</button>