I'm currently working with a standard Kendo Window that contains a Kendo Editor within a modal window. I recently added a dropdownlist to the toolbar of the Kendo Editor for a customized functionality. The purpose of this custom dropdownlist is to insert specific values into the editor. You can see an example of how it functions here: . The custom toolbar populates properly, allowing you to select a value and have it inserted into the editor. However, after insertion, the value disappears completely, even from the DOM. Here is the code snippet that I am using:
On the ASPX side with the popup window:
<div class="SearchParam">
<label class="control-label" for="txtAlertEmailBody" style="width:200px">Email Body</label>
<textarea id="txtAlertEmailBody" rows="10" cols="30" style="width:100%;height:400px" aria-label="editor" data-bind="value: AlertEmailBody"></textarea>
<script type="text/x-kendo-template" id="insertSymbol-template">
<label for="templateTool" style='vertical-align:middle;'>Insert Placeholder:</label>
<select id="templateTool" style='width:200px'>
<option value='[DATE]'>[DATE]</option>
<option value='[LIMIT]'>[LIMIT]</option>
<option value='[AMOUNT]'>[AMOUNT]</option>
<option value='[PERCENTAGE]'>[PERCENTAGE]</option>
<option value='[ACCOUNT NUMBER]'>[ACCOUNT NUMBER]</option>
<option value='[CUSTOMER NAME]'>[CUSTOMER NAME]</option>
</select>
</script>
</div>
And on the JavaScript side with the Kendo implementation:
if (!$("#txtAlertEmailBody").data("kendoEditor")) {
$("#txtAlertEmailBody").kendoEditor({
encoded: false,
tools: kendo.ui.Editor.prototype.options.tools.concat([
{
name: "customTemplate",
template: $("#insertSymbol-template").html()
}
]),
resizable: {
content: true,
toolbar: true,
encoded: false
}
});
$("#templateTool").kendoDropDownList({
change: function (e) {
var inputValue = e.sender._inputValue();
$('#txtAlertEmailBody').data('kendoEditor').exec("insertHtml", { html: inputValue });
}
});
}
var window = $("#emailAlert_popup").kendoWindow({
width: "600px",
visible: false,
modal: true,
actions: [
"Maximize",
"Close"
],
});