Editor content not shown when inside tabstrip

[Adam]

I have a tabstrip which I am trying to add kendo editors for but when the editor is added to the tabstrip no content is visible. I can see it in the source but not rendered to the screen. If I move the editor out side the tabstrip it works fine.

​

@(Html.Kendo().TabStrip()
    .Name("statusReportTabs")
    .Items(ts =>
    {
        ts.Add().Text("Daily Events")
            .Selected(true)
            .Content(@<text>
                        <h5>Yesterday's Events (@(Model.ReportDate.AddDays(-1).ToLongDateString()))</h5>
                        @(Html.Kendo().EditorFor(x => x.YesterdaysEvents)
                            .Tools(t => t.FontColor().FontSize())
                            .HtmlAttributes(new {style="height:100px"})
                        )
                        <h5>Today's Events (@Model.ReportDate.ToLongDateString())</h5>
                        @(Html.Kendo().EditorFor(x => x.TodaysEvents)
                            .Tools(t => t.FontColor().FontSize())
                            .HtmlAttributes(new {style="height:100px"})
                        )
                        <h5>Tomorrow's Events (@(Model.ReportDate.AddDays(1).ToLongDateString()))</h5>
                        @(Html.Kendo().EditorFor(x => x.TomorrowsEvents)
                            .Tools(t => t.FontColor().FontSize())
                        )
                      </text>);
        ts.Add().Text("Contact Information")
            .Content("Contact Info Here");
        ts.Add().Text("Concerns")
            .Content("Concern Info Here");
    })


)

[Adam]

Just to clarify when used in the tabstrip the iframe document is always empty.

[Alexander Popov]

Hello Adam,

I tried to reproduce this issue, however everything worked as expected on our side (see screencast). Can you try calling the Editor's refresh method and let us know if that helps? This should redraw the Editor's iframe and could be done once the TabStrip's activate event is triggered.

Regards,
Alexander Popov
Telerik

 

 

[Adam]

I forgot to mention that my tabstrip is part of a modal popup window which is loaded via ajax. Perhaps this is the route of the issue. Ill try to make a project or recording to so this if you can not reproduce it thank you.

[Alexander Popov]

Hi Adam,

I tried again, but it seems I am missing something, because I got the expected results again. Could you please check this screencast and let me know if I am doing something differently? Also, sharing a runnable sample project where the issue is reproduced would really help us to identify the root causes.

Regards,
Alexander Popov
Telerik

 

 

[Adam]

Here is a sample project where I recreate the issue.

On the index page you will see a grid. Right click a row and select “View Full Report” from the context menu. 

The modal window will have a tab strip and the editors for each days’ events on the first tab will have no text in them

 Any help would be great.

 

Thank you

[Alexander Popov]

Hi Adam,

Thank you for the provided project. After reviewing it I would suggest using the Window's refresh event handler to invoke the Editors refresh method. For example:  

editStatusReportWindow = $("#editStatusReportWindow").kendoWindow({
    refresh: function () {
        $("[data-role='editor']").each(function () {
            $(this).getKendoEditor().refresh();
        });
    },

Regards,
Alexander Popov
Telerik

 

 

[Adam]

Thank you that worked great.