[Solved] Editor inside a tabstrip not initialised

[Nathan]

Hi

I'm using an Telerik Editor inside a Tabstrip and its not being rendered properly. None of the tools work and no text in the editor is being displayed.

Looking at the source I suspect the Editor control is not being initialised properly and its jquery functions are not being added.

I am using Extensions for ASP.NET MVC Q1 2011 Version 2011.1 315 and I have prepared a simple Telerik MVC project to demonstrate my problem. This project uses VS2010 SP1, .Net 4.0, MVC 3.

In the app, there should be text displayed within the Editor in the Child tab. Instead there is nothing.

[Atanas Korchev]

Hello Nathan,

 Check this article. When loading Telerik UI extensions via ajax you need to include the required JavaScript files manually.

 I modified your sample project to include the files required by the editor:

<%: Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
    .Add("telerik.common.js")
    .Add("telerik.list.js")
    .Add("telerik.combobox.js")
    .Add("telerik.draganddrop.js")
    .Add("telerik.window.js")
    .Add("telerik.editor.js")
    .Combined(true).Compress(true))
%>

You can find it attached.

All the best,
Atanas Korchev
the Telerik team

[Nathan]

ok that has solved the problem thanks.

I noticed that in my MVC 3 project I can have the following line in the Site.Master

<%: Html.Telerik().ScriptRegistrar().DefaultGroup(group => group.Combined(true).Compress(true)) %>

and then append to it with the rest in the Index.aspx file

<%: Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
        .Add("telerik.common.js")
        .Add("telerik.list.js")
        .Add("telerik.combobox.js")
        .Add("telerik.draganddrop.js")
        .Add("telerik.window.js")
        .Add("telerik.editor.js")
        .Combined(true)
        .Compress(true))
    %>

However, this does not seem to work with MVC 2. When I try it (using "<%=") I get the error "You cannot call render more than once."
Is it because the "<%:" allows me to add scripts without calling .Render(); in MVC 3?

thanks

[Atanas Korchev]

Hello Nathan,

 No, this is because you are rendering the ScriptRegistrar twice (via <%: %>). If you want to declare another ScriptRegistrar in your view (.aspx) use this syntax instead:

<% Html.Telerik().ScriptRegistrar().DefaultGroup(group => group

        .Add("telerik.common.js")

        .Add("telerik.list.js")

        .Add("telerik.combobox.js")

        .Add("telerik.draganddrop.js")

        .Add("telerik.window.js")

        .Add("telerik.editor.js")

        .Combined(true)

        .Compress(true)); 

    %>

Notice that <%: %> is replaced with <% %> which does not cause the ScriptRegistrar to render. It just merges the settings of both ScriptRegistrars (the one form the master page and the one from your view page).

Regards,
Atanas Korchev
the Telerik team

[Nathan]

Yes you're absolutely correct thanks!

[Ruben]

Hi  Atanas,

the solution you have provided works correctly in Internet Explorer, however it doesn't in Chrome/Safari. I haven't been able to test Firefox yet.

Do you have any clue, I'm having the same issue in one of the products we are developing.

Regards,

Ruben

[Ruben]

I think this has a lot to do with the line ".t-tabstrip .t-content, .t-panelbar .t-tabstrip .t-content { display: none; } in telerik.common(.min).css, which causes the iFrame of the editor with class t-content to be hidden once it's in a tabstrip item.

[Atanas Korchev]

Hi ruben stolk,

 The provided solution should work in all supported browsers. Find attached a sample project.

All the best,
Atanas Korchev
the Telerik team

[Le Quang]

Hello admin
I using MVC3 Razor and I registered javascripts in _Layout.cshtml as following:

@(Html.Telerik().ScriptRegistrar().DefaultGroup(group => group
        .Add("telerik.common.js")
        .Add("telerik.list.js")
        .Add("telerik.combobox.js")
        .Add("telerik.draganddrop.js")
        .Add("telerik.window.js")
        .Add("telerik.editor.js")
        .Combined(true)
        .Compress(true))
        )

It just work in IE browser, however it doesn't in Firefox. Please tell me how to correct it.

[Venkitachalam]

Hello Admin,

I have a TabStrip that uses LoadContentFrom to load a partial view that contains an Editor control. 
However, the Editor control appears but is disabled - meaning I can't type in the textarea or use any of the toolbar buttons. 
When I don't use the TabStrip and just load the view with the Editor on it's own, the Editor is working correctly.

VS Version : VS2008
MVC: 2


Thanks & Regards
Rahul Kale

[Atanas Korchev]

Hi Venkitachalam,

This thread should contain a working sample project. Does it work for you? How is your project different? Can you send it as an attachment?

Regards,
Atanas Korchev
the Telerik team

[Venkitachalam]

According to client policy I can not share my code with any one.

Actually I have created sample MVC project. In this sample project every thing is working fine.

But in my real project editor control behaves strangely. On initial load it renders correctly but when I save value to database using Json Call Editors value get saved in database and then Editor get disabled.

We use Spring.Net framework for MVC along with nHibernate.

Thanks & Regards
Rahul Kale

[gamer]

Hi.
I've attached solution, where TabStrip contains two tabs with Editor in each. View with TabStrip is loaded with jQuery.load().
In FF3-6 editor in selected tab initialized normally, but editor in hidden tab not initialized.
In IE8-9 all editors initialized and work.
All js scripts used from Q2 release.

[Jay]

Having the exact same problem described above by gamer.

Any workarounds for this yet?

[Alex Gyoshev]

Hello Jeff,

The editor needs to be visible when it is initialized, or re-initialized when it's shown. You can re-initialize it like this:

$("#TabStrip").bind("select", function(e) {
    setTimeout(function() {
        $(".t-editor:visible").each(function() {
            this.parentNode.insertBefore(this, this.nextSibling);
        });
    });
});

Kind regards,
Alex Gyoshev
the Telerik team