【问题标题】:KendoUI Grid Custom Popup template for create button用于创建按钮的 Kendo UI Grid 自定义弹出模板
【发布时间】:2013-04-18 11:29:58
【问题描述】:

我已经安装了带有 POPUP 选项的 KendoGrid。

现在我被困在某个地方,我找不到任何帮助来用我想要的方式修复它..

所以这是我在使用 KendoGrid 弹出窗口编辑时面临的问题。

当我单击添加新记录时,顶部的标题显示编辑,与单击编辑时显示的相同。

http://jsfiddle.net/valchev/BCBzS/1/

按钮也显示更新,而不是创建弹出窗口上的保存按钮..

我想我必须在下面添加更多类似的东西来创建新记录..

editable: {
    mode: "popup",
    template: kendo.template($("#popup_editor").html())
},

并让弹出窗口创建模板与编辑模板不同?

谁能帮我解决这个问题?

【问题讨论】:

    标签: php kendo-ui kendo-grid


    【解决方案1】:

    如果您查看 demo page 进行弹出编辑,这似乎是正常行为...

    但是您可以欺骗并使用网格的edit 事件来改变它。只需在此事件的开头添加以下代码:

    if(!e.model.Id) {
        $(".k-window .k-window-title").text("Add new record");
        $(".k-window .k-grid-update").html("<span class=\"k-icon k-update\"></span>Create");
    }   
    

    查看更新后的jsFiddle。

    【讨论】:

    • 用你的技巧解决了问题。你更新的 JsFiddle 帮助了我很多。谢谢。
    【解决方案2】:

    您可以使用 Kendo UI 网格本地化来更改弹出标题。

    要更改 Edit 标题,您应该在网格中定义:

    editable  : {
        mode : "popup",
        window : {
            title: "Create",
        }
    },
    

    为了改变按钮的标签,我们需要做一个小技巧......这些标签可以本地化为column.command,如下所示:

    columns   : [
        {
            command: [
                {
                    name: "edit",
                    text: { edit: "Modify", update: "Save", cancel: "Cancel"}
                }
            ],
        },
        ...
    

    问题在于窗口标题和按钮标签在编辑和创建按钮之间共享,因此更改一个您会更改两者。你能找到一些对两者都适用的标签吗?

    查看它在JS Fiddle 中运行

    【讨论】:

    • 先生,按照您的方式是不是有任何选项可以让编辑弹出窗口和创建弹出窗口具有不同的标题名称?
    • 先生,问题已解决。 @Samuel Caillerie 给出的解决方案。
    • 有,但工作量很大...您定义一个 custom 工具栏命令,单击该命令会打开一个窗口,除了表单之外,您还可以添加两个按钮(保存和取消),您拦截对这些按钮的单击并执行任何需要的操作。正如我所说的......很多工作,但如果真的需要,你就是那个人。
    • 哦。希望我有时间。现在需要为我自己节省一些时间。非常感谢您的帮助..
    【解决方案3】:

    通过添加以下代码来做到这一点

                               edit: function (e) { if (!e.model.isNew()) {
                                    e.container.kendoWindow("title", "Update Address");
                                } else {
                                    e.container.kendoWindow("title", "New Address");
                                }
                            }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2017-11-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-09-26
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多