Editor inside editor template not binding to field

[Christina]

Hi, I have a grid with the editable mode set to popup like so:

.Editable(editable => { editable.Mode(GridEditMode.PopUp); editable.TemplateName("EmailTemplate"); })

And then "EmailTemplate" looks like so:


@model Young_Ealing.Models.EmailTemplate

 

@Html.LabelFor(m=>m.Name)

@Html.TextBoxFor(m=>m.Name)

@Html.LabelFor(m=>m.Subject)

@Html.TextBoxFor(m=>m.Subject)

@Html.LabelFor(m=>m.Body)

@(Html.Kendo().EditorFor(m=>m.Body).Name("Body").Tools(tools => tools.FontName().Bold().Clear().CreateLink().FontSize().FormatBlock().Indent()

            

.InsertImage().InsertOrderedList().InsertUnorderedList().Italic().JustifyCenter()            .JustifyFull().JustifyLeft().JustifyRight().Outdent().Separator().Strikethrough()

            .SubScript().SuperScript().Underline().Unlink().ViewHtml().CustomButton(cb => cb.Name("add_name").ToolTip("insert individual name").Exec(@<text>

            function(e) {

                var editor = $(this).data("kendoEditor");

                editor.exec("inserthtml", { value: "@(Young_Ealing.Code.EmailUtils.TEMPLATE_INDIVIDUAL_NAME)" });

            }

        </text>))).HtmlAttributes(new { style = "width: 785px;height:295px;"}))

@Html.LabelFor(m => m.IsHtml)

@Html.CheckBoxFor(m => m.IsHtml)

<div class="clear"></div>

Everything works as expected except the Editor does not show the contents of the "Body" field and when I post the form back the contents of EmailTemplate.Body is null. All the other fields save and display fine. And if I bind "Body" to a normal text area it works fine too, so the problem lies somewhere in my implementation of the Kendo UI Editor.

[Vladimir Iliev]

Hi Christina,

I tried to reproduce the problem locally but to no avail – everything is working as expected on our side. Could you please provide runable project where the issue is reproduced and more information about the exact browser (and version) that you are using? This would help us pinpoint the exact reason for this behavior.

Kind Regards,
Vladimir Iliev
Telerik

[Felipe]

Hey please support!!! I have the same issue.... I have a Kendo grid with an editor button which loads a template form.

Within the template form, I added an Editor control. The problem is .. It is not loading any information from the model.

When the control is loading you can see the model information during less than 0.5 second. After that, the information is removed and the control is set like in not enable mode. What's going on there?  

But if I change the Editor for a text area everything is working fine! I also have the editor in other Web Pages and it is also working without problem. The issue only occurs in the PopUp Template Form. 

Please help me.. 

BTW.. I am using Firefox 21.0 and Kendo UI Complete v2012.3.1315

[Vladimir Iliev]

Hi Felipe,

 
This is an already know issue and currently our dev team is after it. It can be reproduced when the Editor widget is initialized before the PopUp window (which moves it in the DOM) in FireFox. Possible workaround is to use the Edit event of the Grid to trigger the "DOMNodeInserted" event:

function onEdit(e) {
    e.container.trigger("DOMNodeInserted");
}

Kind Regards,
Vladimir Iliev
Telerik

[Sajitha]

Dear Team,

I have a Kendo EditorFor control, where I am displaying content from the database(an email thread) and now I wanted to insert the email signature of the user to the content area on the click of a CustomTemplate button added to the tools of the EditorFor contro as below.

 

 @(Html.Kendo().EditorFor(model => model.RequestDescription)
                .Name("new_editorForRequestDescription")
                .HtmlAttributes(new {style = "height:440px", aria_label = "editor", tabindex = 195 })
                .Encode(false)
                .HtmlAttributes(new { style = "float: right;" })
                    .Tools(tools=>tools
                    .CustomTemplate(c => c.Template("<button class='k-button' style='margin-right: 10px;' onclick='insertEmailSignature()'>Insert Signature</button>"))
                 ))

 

And the function as below.

 

function insertEmailSignature()
        {
            var currentUser = JSON.parse('@Html.Raw(Json.Encode(ViewData["CurrentUserName"]))');
            var fullSignature = currentUser + '<br>' + getStandardEmailSignature() + '<hr/>';        
            
            InsertToBody(fullSignature);          
           
        }

function InsertToBody(signature) {
    $("#new_editorForRequestDescription").kendoEditor();
    var editor = $("#new_editorForRequestDescription").data("kendoEditor").value();
    var storedRange = editor.getRange();
    editor.selectRange(storedRange);
    editor.exec("inserthtml", { value: signature });
    return
}

 

Now I am getting issues in getRange(), SelectRange() and Exec() and giving error as "editor.exec is not a function", editor.getRange is not a function etc.

My requirement is to just insert the email signature to the editor area.

Please help me.

 

Thanks,

Sajitha 

 

[Plamen]

Hello,

In the shared code the editor variable is assigned to .data("kendoEditor").value() and that is returning the value of the editor and not the editor itself. I have changed it to the code below and it worked correctly at my side:

    var editor = $("#new_editorForRequestDescription").data("kendoEditor");

Regards,
Plamen
Progress Telerik

[Sajitha]

Thanks, that worked for me.