在Kendo UI网格中内联编辑？

Posted 2021-05-03

在ajax调用服务器之后，取消按钮仍然存在且更新按钮永远不会更改回Kendo UI网格中的编辑？！我想我必须通知网格更新已经完成，但是如何？

<div id="mykendoGrid">
    <script>

        $(document).ready(function () {
            var MydataSource = new kendo.data.DataSource({
                transport: {
                    read: function (options) {
                        $.ajax({
                            url: "/_layouts/AjaxCallHandler/Handler.ashx",
                            contentType: "application/json; charset=utf-8",
                            dataType: "json",
                            cache: false,
                            //data: options.data,
                            success: function (data) {
                                //ko.mapping.fromJS(data, self.seats);
                                options.success(data);
                            }
                        });
                    },
                    update:  function (options) {
                            $.ajax(
                                {
                                    type: 'POST',
                                    url: "/_layouts/AjaxCallHandler/Handler.ashx",
                                    data: { 'currency': ko.mapping.toJSON(options.data) },
                                    success: function (response)
                                    {
                                        // do nothing
                                        alert("Successfully Saved.");
                                    },
                                    error: function (repsonse) {
                                        alert("Manage: UpdateReportName -> Ajax Error!");
                                    }
                                });
                            return;
                        }
                    //parameterMap: function (data, operation) {
                    //    if (operation !== "read") {
                    //        return JSON.stringify({ currency: data })
                    //        //return ko.mapping.fromJS(data, self.seats);
                    //    }
                    //}
                },
                batch: false,
                pageSize: 10,
                schema: {
                    //data: 'd',
                    model:
                    {
                        id: "ID",
                        fields:
                        {
                            ID: { editable: false, nullable: false },
                            DisplayName: { editable: true },
                            Code: { editable: true }
                        }
                    }
                }
            })

            $("#mykendoGrid").kendoGrid({
                dataSource: MydataSource,
                pageable: true,
                toolbar: ["create"],
                columns: [{ field: "ID", title: "ID" }, { field: "DisplayName", title: "Display Name" }, { field: "Code", title: "Code" }, { command: ["edit"], title: "&nbsp;", width: "250px" }],
                editable: "inline",
                scrollable: true
            });
        });

    </script>
</div>

答案

你需要调用options.success（）;

update:  function (options) {
                        $.ajax(
                            {
                                type: 'POST',
                                url: "/_layouts/AjaxCallHandler/Handler.ashx",
                                data: { 'currency': ko.mapping.toJSON(options.data) },
                                success: function (response)
                                {
                                    // do nothing
                                    alert("Successfully Saved.");
                                    options.success();
                                    //or
                                    //options.success(reponse);
                                },
                                error: function (response) {
                                    alert("Manage: UpdateReportName -> Ajax Error!");
                                    options.error();
                                    //or
                                    //options.error(reponse);
                                }
                            });
                        return;
                    }

另一答案

你需要从你的javascript中调用yourGrid.saveChanges();。这将遍历每一行，为您的网格数据源执行必要的创建，更新和销毁命令，并保存所有编辑内容。