I am trying to add a menu to the Editor tools that populates based on a AJAX get call. The menu will add html to the editor.
<code>
$('#OptionTextReport').kendoEditor({
tools: [
"bold",
"italic",
"underline",
"strikethrough",
{
name: "insertFeature",
template: '<ul id="featureTool"></ul>'
}
],
resizable: {
content: true,
toolbar: true
}
});
var editor = $('#OptionTextReport').data("kendoEditor");
var updateFeatureList = function (featureList) {
var list = [];
$.each(featureList, function(index, value) {
list.push({
text: value.FeatureDescription,
attr:{ featureid: value.FeatureId, description: value.FeatureDescription },
select: function (e) {
var id = $(e.target).parent().attr("featureid");
var description = $(e.target).parent().attr("description");
var html = '<span class="feature" featureid="' + id + '">[' + description + ']</span>';
editor.exec("insertHtml", { value: html });
$('.k-animation-container').hide();
featureMenu.close();
}
});
});
var result = {
text: 'Insert Feature',
cssClass: "insert-feature",
items: list
}
featureMenu.remove(".insert-feature");
featureMenu.append([result]);
}
$.get(window.pulse.Category.Url.GetOptionFeatures + '?optionId=' + optionId, function (data) {
updateFeatureList(data.Data);
}, 'json');
</code>
The menu populates correctly but when selecting an item from the list the menu stops working. the style changes and clicking on the menu does nothing.
I am using Kendo version 2018.2.620 and JQuery version 3.31 and testing using chrome 69.0.3497.81.