繁体   English   中英

在Kendo UI网格中内联编辑?

[英]Inline edit in Kendo UI grid?

在服务器调用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;
                    }

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM