Create an Item in the DataSource without Refreshing the Grid

Environment

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

Description

How can I prevent the Kendo UI Grid from refreshing when I insert an item in the dataSource?

Solution

1. Unbind the change event handler of the dataSource from the Grid.
2. Insert the item.
3. Bind the change event handler of the dataSource to the Grid.

<div id="grid"></div>

<script>
    var dataSource = new kendo.data.DataSource({
        schema: {
            model: {
                id: "id"
            }
        }
    });
    dataSource.pushCreate([{
        id: 1,
        name: "John Doe"
    }, {
        id: 4,
        name: "Alex"
    }]);

    var grid = $("#grid").kendoGrid({
        dataSource: dataSource
    }).data("kendoGrid");

    setTimeout(function(e) {
        //prevent the Grid from refreshing upon inserting a row
        dataSource.unbind("change", grid._refreshHandler);
        dataSource.insert(1, {
            id: 2,
            name: "Peter"
        });
        //Bind back the change event handler of the dataSource to the Grid.
        dataSource.bind("change", grid._refreshHandler);
    }, 1000)

    setTimeout(function(e) {
        //this will now refresh the Grid, change is bound
        dataSource.insert(2, {
            id: 3,
            name: "Michael"
        });
    }, 3000)
</script>