Editor content not shown when inside tabstrip

8 posts, 1 answers
  1. Adam
    Adam avatar
    8 posts
    Member since:
    Aug 2011

    Posted 18 Sep 2014 Link to this post

    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");
        })
     
     
    )
  2. Adam
    Adam avatar
    8 posts
    Member since:
    Aug 2011

    Posted 18 Sep 2014 in reply to Adam Link to this post

    Just to clarify when used in the tabstrip the iframe document is always empty.
  3. Kendo UI is VS 2017 Ready
  4. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 22 Sep 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  5. Adam
    Adam avatar
    8 posts
    Member since:
    Aug 2011

    Posted 22 Sep 2014 Link to this post

    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.
  6. Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 24 Sep 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  7. Adam
    Adam avatar
    8 posts
    Member since:
    Aug 2011

    Posted 26 Sep 2014 Link to this post

    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

  8. Answer
    Alexander Popov
    Admin
    Alexander Popov avatar
    1416 posts

    Posted 30 Sep 2014 Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Adam
    Adam avatar
    8 posts
    Member since:
    Aug 2011

    Posted 30 Sep 2014 in reply to Alexander Popov Link to this post

    Thank you that worked great.
Back to Top
Kendo UI is VS 2017 Ready