点击剑道网格的编辑，在剑道窗口中填充文本框/DDL

Question

我正在使用剑道网格和剑道窗口。。点击剑道网格中的编辑，需要填充一个由文本框组成的剑道窗口。。我没有使用可编辑的"弹出窗口"，因为在剑道窗口中有一个网格。无论如何。。这是我的窗口

                        if (!window.data("kendoWindow")) {
                            window.kendoWindow({
                                visible: true
                                , resizable: false
                              //, content:' /api/Info/'
                                , modal: true
                                , actions: ["Close"],
                                close: function (e) {
                                }
                            });
                        }
                            window.data("kendoWindow").title(header);
                            window.data("kendoWindow").center();
                            window.data("kendoWindow").open();
                    }

我目前正在从剑道网格的选定行获取数据。我需要做的只是用数据填充Kendo窗口。。我试着使用-content:"api/foo"，但它不起作用。。我认为我需要明确地设置textBox值。。我该怎么做？！请帮忙！谢谢

Answer 1

您需要将所选行项目（Observable Object）绑定到Window Form。以下是一些关于值绑定的链接：

价值绑定演示

价值绑定API

Answer 2

我建议使用带有窗口的模板。在网格中设置可编辑属性：

editable: 
    {
        mode: "popup",
        window: {               
            animation: false,
            open: updateRowEventHandler
        }
    } // skip edit property, since that will open a custom popup

然后定义编辑事件的eventHandler函数：

function updateRowEventHandler(e) {
     e.preventDefault(); //prevent opening custom popup
     var uid = $(".k-edit-form-container").closest("[data-role=window]").data("uid");
     let model = $("#grid").data("kendoGrid").dataSource.getByUid(uid);
     //pass model to a template
     let updateTemplate = kendo.template($("#updateDialog").html())(model);
     //initialize the window here
     let updateWindow = window.kendoWindow({
                            visible: true
                            , resizable: false
     ...
     //then pass your model to the template
     updateWindow.data("kendoWindow")
      .content(updateTemplate)
      .center().open();

模板应该是这样的：

<script type="text/x-kendo-template" id="updateDialog">
  <label>Label:</label>
  <input value="#= data.ModelPropertyYouPassed #" />
</script>