如何在编辑期间使用弹出编辑器同步网格

Question

在以下网格中，当您使用弹出编辑器开始编辑时，您不会同时看到网格中的更改，我该怎么做？ 以下网格是SHIELDUI站点的示例，可在以下位置找到：

http://demos.shieldui.com/web/grid-editing/popup-editing

<script type="text/javascript">
$(document).ready(function () {
    $("#grid").shieldGrid({
        dataSource: {
            remote: {
                read: "/employees",
                modify: {
                    create: {
                        url: "/employees/EmployeeCreate",
                        type: "post",
                        data: function (edited) {
                            var date = edited[0].data.BirthDate ? edited[0].data.BirthDate.toJSON() : new Date().toJSON();
                            return {
                                Active: edited[0].data.Active,
                                Age: edited[0].data.Age,
                                BirthDate: date,
                                Name: edited[0].data.Name,
                                ID: edited[0].data.ID
                            };
                        }
                    },
                    update: {
                        url: "/employees/EmployeeUpdate",
                        type: "post",
                        data: function (edited) {
                            var date = edited[0].data.BirthDate ? edited[0].data.BirthDate.toJSON() : new Date().toJSON();
                            return { 
                                Active: edited[0].data.Active,
                                BirthDate: date,
                                Age: edited[0].data.Age,
                                Name: edited[0].data.Name,
                                ID: edited[0].data.ID
                            };
                        }
                    },
                    remove: {
                        url: "/employees/EmployeeRemove",
                        type: "post",
                        data: function (removed) {
                            return { ID: removed[0].data.ID };
                        }
                    }
                }
            },
            schema: {
                fields: {
                    ID: { path: "ID", type: Number },
                    Name: { path: "Name", type: String },
                    Age: { path: "Age", type: Number },
                    BirthDate: { path: "BirthDate", type: Date },
                    Active: { path: "Active", type: Boolean }
                }
            }
        },
        paging: {
            pageSize: 5
        },
        rowHover: false,
        columns: [
            { field: "Name", title: "Product Name"},
            { field: "Age", title: "Age", width: "100px" },
            { field: "BirthDate", title: "Birth Date", format: "{0:MM/dd/yyyy}" },
            { field: "Active", title: "Active", width: "70px" },
            {
                width: 150,
                title: " ",
                buttons: [
                    { commandName: "edit", caption: "Edit" },
                    { commandName: "delete", caption: "Delete" }
                ]
            }
        ],
        editing: {
            enabled: true,
            mode: "popup",
            confirmation: {
                "delete": {
                    enabled: true,
                    template: function (item) {
                        return "Delete product with name '" + item.Name + "'?";
                    }
                }
            }
        },
        toolbar: [
            {
                buttons: [
                    { commandName: "insert", caption: "Add Product" }
                ],
                position: "top"
            }
        ]
    });
});