Trigger SaveChanges outside the Grid

Environment

Product	Progress® Kendo UI® Grid for jQuery
Product Version	Created with the 2017.3.1026 version

Description

How can I save the changes in the Kendo UI Grid by using an outside button?

Solution

1. Select the Grid.
2. Use the saveChanges method.

<button id="saveChanges">Save Changes</button>
<br /><br />
<div id="grid"></div>

<script>
    $("#grid").kendoGrid({
        columns: [{
                field: "name"
            },
            {
                field: "age"
            }
        ],
        dataSource: {
            data: [{
                    id: 1,
                    name: "Jane Doe",
                    age: 30
                },
                {
                    id: 2,
                    name: "John Doe",
                    age: 33
                }
            ],
            schema: {
                model: {
                    id: "id"
                }
            }
        },
        editable: true
    });
    $("#saveChanges").kendoButton({
        click: function(e) {
            var grid = $("#grid").data("kendoGrid");
            grid.saveChanges();
        }
    })
</script>