I'm using the editor and its in a jquery ui dialog, and I can't type text into the editor.
I call this function to open the jquery ui dialog:
function openSendEmailWindow(checkedArray) {
debugger;
$.ajax({
cache: false,
url: '/SendEmail/Email',
data: { checkedRecords: checkedArray.toString() },
type: "GET",
success: function (response, status, jqXHR) {
//debugger;
if (jqXHR.responseText) {
//debugger;
$("<div id='sendEmailWindow' style='display:none' title='Send Email'></div>").appendTo(".body-content");
$("#sendEmailWindow").html(response);
$("#sendEmailWindow").dialog({
position: ['top', 60],
width: 1300,
height: 625,
modal: true,
close: function (event, ui) {
$(this).dialog('destroy').remove();
}
});
}
},
error: function (jqXHR) {
//debugger;
alert(jqXHR.statusText);
}
});
}
This is my partial view:
<div id="windowWrapper">
@using (Ajax.BeginForm("Email", "SendEmail", new AjaxOptions() { HttpMethod = "Post" }, new { id = "sendEmailForm", role = "form" }))
{
<div id="commandBar">
<span style="line-height:2em; margin-left:0.125em">
<button type="submit" class="k-button k-button-icon"><span class="k-icon k-update"></span></button>
<button type="button" onclick="closeSendEmailWindow(event);" class="k-button k-button-icon"><span class="k-icon k-cancel"></span></button>
</span>
</div>
<div id="windowContent">
<br />
@*@Html.AntiForgeryToken()*@
@Html.ValidationSummary(false, "Please correct the errors and try again:")
<div class="container-fluid">
<div class="row">
<div class='col-md-12'>
<div class="form-group">
@Html.LabelFor(m => m.Subject)<br />
@Html.TextBoxFor(m => m.Subject, new { @class = "form-control" })
@Html.ValidationMessage("Subject", "*")
</div>
</div>
</div>
<div class="row">
<div class='col-md-12'>
<div class="form-group">
@Html.LabelFor(m => m.Message)
@(Html.Kendo().EditorFor(m => m.Message)
.HtmlAttributes(new { @class = "form-control", style = "height:400px" })
)
@Html.ValidationMessage("Message", "*")
</div>
</div>
</div>
<div class="row">
<div class='col-md-12'>
<div class="form-group">
@Html.LabelFor(m => m.Attachment)<br />
@(Html.Kendo().Upload()
.Name("Files")
.HtmlAttributes(new { @class = "form-control" })
)
@Html.ValidationMessage("Attachment", "*")
</div>
</div>
</div>
</div>
@Html.HiddenFor(m => m.CheckedRecords)
@Html.HiddenFor(m => m.Attachment)
</div>
}
</div>
<script type="text/javascript">
function closeSendEmailWindow(e) {
this.parent.$("#sendEmailWindow").dialog('close');
}
$(document).ready(function () {
//for kendo numeric textbox to enable validation
$.validator.setDefaults({
ignore: ""
});
$.validator.unobtrusive.parse("#sendEmailForm");
$('#sendEmailForm').submit(function (e) {
debugger;
e.preventDefault();
$.ajax({
cache: false,
url: '@Url.Action("Email", "SendEmail")',
type: 'POST',
data: $(this).serialize(),
success: function (response, status, jqXHR) {
debugger;
if (jqXHR.responseText == '') {
$('input:checkbox').each(function () {
this.checked = false;
});
checked = {};
checkedArray = null;
$("#sendEmailWindow").dialog('close');
}
},
error: function (jqXHR) {
debugger;
alert(jqXHR.statusText);
}
});
return false;
});
});
</script>
I call this function to open the jquery ui dialog:
function openSendEmailWindow(checkedArray) {
debugger;
$.ajax({
cache: false,
url: '/SendEmail/Email',
data: { checkedRecords: checkedArray.toString() },
type: "GET",
success: function (response, status, jqXHR) {
//debugger;
if (jqXHR.responseText) {
//debugger;
$("<div id='sendEmailWindow' style='display:none' title='Send Email'></div>").appendTo(".body-content");
$("#sendEmailWindow").html(response);
$("#sendEmailWindow").dialog({
position: ['top', 60],
width: 1300,
height: 625,
modal: true,
close: function (event, ui) {
$(this).dialog('destroy').remove();
}
});
}
},
error: function (jqXHR) {
//debugger;
alert(jqXHR.statusText);
}
});
}
This is my partial view:
<div id="windowWrapper">
@using (Ajax.BeginForm("Email", "SendEmail", new AjaxOptions() { HttpMethod = "Post" }, new { id = "sendEmailForm", role = "form" }))
{
<div id="commandBar">
<span style="line-height:2em; margin-left:0.125em">
<button type="submit" class="k-button k-button-icon"><span class="k-icon k-update"></span></button>
<button type="button" onclick="closeSendEmailWindow(event);" class="k-button k-button-icon"><span class="k-icon k-cancel"></span></button>
</span>
</div>
<div id="windowContent">
<br />
@*@Html.AntiForgeryToken()*@
@Html.ValidationSummary(false, "Please correct the errors and try again:")
<div class="container-fluid">
<div class="row">
<div class='col-md-12'>
<div class="form-group">
@Html.LabelFor(m => m.Subject)<br />
@Html.TextBoxFor(m => m.Subject, new { @class = "form-control" })
@Html.ValidationMessage("Subject", "*")
</div>
</div>
</div>
<div class="row">
<div class='col-md-12'>
<div class="form-group">
@Html.LabelFor(m => m.Message)
@(Html.Kendo().EditorFor(m => m.Message)
.HtmlAttributes(new { @class = "form-control", style = "height:400px" })
)
@Html.ValidationMessage("Message", "*")
</div>
</div>
</div>
<div class="row">
<div class='col-md-12'>
<div class="form-group">
@Html.LabelFor(m => m.Attachment)<br />
@(Html.Kendo().Upload()
.Name("Files")
.HtmlAttributes(new { @class = "form-control" })
)
@Html.ValidationMessage("Attachment", "*")
</div>
</div>
</div>
</div>
@Html.HiddenFor(m => m.CheckedRecords)
@Html.HiddenFor(m => m.Attachment)
</div>
}
</div>
<script type="text/javascript">
function closeSendEmailWindow(e) {
this.parent.$("#sendEmailWindow").dialog('close');
}
$(document).ready(function () {
//for kendo numeric textbox to enable validation
$.validator.setDefaults({
ignore: ""
});
$.validator.unobtrusive.parse("#sendEmailForm");
$('#sendEmailForm').submit(function (e) {
debugger;
e.preventDefault();
$.ajax({
cache: false,
url: '@Url.Action("Email", "SendEmail")',
type: 'POST',
data: $(this).serialize(),
success: function (response, status, jqXHR) {
debugger;
if (jqXHR.responseText == '') {
$('input:checkbox').each(function () {
this.checked = false;
});
checked = {};
checkedArray = null;
$("#sendEmailWindow").dialog('close');
}
},
error: function (jqXHR) {
debugger;
alert(jqXHR.statusText);
}
});
return false;
});
});
</script>
1 Answer, 1 is accepted
0
Hello Michael,
Please check if setting the content after initializing the dialog:
or if calling the refresh method:
resolves the problem. The dialog will move the element to the <body> which will cause the editable iframe to be reloaded by the browser and the content will become not editable.
Regards,
Daniel
Telerik
Please check if setting the content after initializing the dialog:
$("#sendEmailWindow").dialog({ position: ['top', 60], width: 1300, height: 625, modal: true, close: function (event, ui) { $(this).dialog('destroy').remove(); }});$("#sendEmailWindow").html($("#template").html());$("#sendEmailWindow").html($("#template").html());$("#sendEmailWindow").dialog({ position: ['top', 60], width: 1300, height: 625, modal: true, close: function (event, ui) { $(this).dialog('destroy').remove(); }});$("#Message").data("kendoEditor").refresh();resolves the problem. The dialog will move the element to the <body> which will cause the editable iframe to be reloaded by the browser and the content will become not editable.
Regards,
Daniel
Telerik
Build cross-platform mobile apps using Visual Studio and .NET. Register for the online webinar on 03/27/2014, 11:00AM US ET.. Seats are limited.