剑道 UI 编辑器复制答案

【问题标题】：Kendo UI Editor Duplicating剑道 UI 编辑器复制
【发布时间】：2018-08-08 18:04:42
【问题描述】：

我有一个带有以下命令的剑道网格。当我第一次单击命令按钮时，它工作正常，有 1 个<input>、1 个<textarea> 和 1 个<input>。当我关闭弹出窗口并重新打开它时，<textarea> 每次都会重复。

command: [{
    name: "Edit",
    title: "Alert Email",
    width: "180px",
    click: onDataBound75
}],

调用以下函数：

function onDataBound75(e) {
    e.preventDefault();
    $("#txtAlert").kendoEditor({
        resizable: {
            content: true,
            toolbar: true,
            encoded: false
        }
    });
    var window = $("#emailAlert_popup").kendoWindow({
        width: "600px",
        visible: false,
        modal: true,
        actions: [
            "Maximize",
            "Close"
        ],
    });
    var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
    var viewModelAlert75 = kendo.observable({
        Alert75EmailSubject: dataItem.Alert75EmailSubject,
        Alert75EmailBody: dataItem.Alert75EmailBody,
        Alert75FromAddress: dataItem.Alert75FromAddress,
    });
    kendo.bind($("#emailAlert_popup"), viewModelAlert75);
    window.data("kendoWindow").center().open();
};

aspx 文件如下所示：

<div id="emailAlert_popup" class="TT_PopupWindow">
    <div class="SearchParam">
        <label class="control-label" for="txtAlert75EmailSubject" style="width:200px">Email Subject</label>
        <input name="txtEmailSubject" id="txtAlert75EmailSubject" class="k-textbox" style="width:430px"
            data-bind="value: Alert75EmailSubject" />                    
    </div>
    <div class="SearchParam">
        <label class="control-label" for="txtAlert75EmailBody" style="width:200px">Email Body</label>
        <textarea id="txtAlert" rows="10" cols="30" style="height:440px" aria-label="editor" data-bind="value: Alert75EmailBody"></textarea>
    </div>
    <div class="SearchParam">
        <label class="control-label" for="txtAlert75FromAddress" style="width:200px">From Address</label>
        <input name="txtFromAddress" id="txtAlert75FromAddress" class="k-textbox" style="width:430px"
            data-bind="value: Alert75FromAddress"
        />
    </div>
    <div class="k-edit-buttons k-state-default">
        <button type="button" id="btnAlert75EmailUpdate" data-role="button" class="k-button k-button-icontext k-primary k-grid-update" role="button" aria-disabled="false" tabindex="0" style="float:right"><span class="k-icon k-i-check"></span>Update</button>
        <button type="button" id="btnAlert75Cancel" data-role="button" class="k-button k-button-icontext k-grid-cancel" role="button" aria-disabled="false" tabindex="1" style="float:right"><span class="k-icon k-i-cancel"></span>Cancel</button>
    </div>
</div>

【问题讨论】：

标签： asp.net kendo-ui kendo-grid

【解决方案1】：

我认为当您第二次或更多次打开窗口时，它的内容已经创建，因此您正在创建另一个 kendoEditor 和现有的。试试这个：

if (!$("#txtAlert").data("kendoEditor")) {
    $("#txtAlert").kendoEditor({
        resizable: {
            content: true,
            toolbar: true,
            encoded: false
        }
    });
}

如果 textarea 已经是编辑器，则无论何时打开窗口，上述条件都会检查。

【讨论】：

@RodneyWilson 这是剑道窗口的常见问题。由于这个问题，我习惯于销毁整个小部件，它是 DOM。