RibbonBar in RadEditor in RadPane/RadTabStrip doesn't render properly if not visible table

[Ron Michael Zettlemoyer]

I have a RadEditor control instead a RadPane/RadTabStrip.  I set it to use the RibbonBar to render the menu.  At initial page load all of this is hidden; it's made visible later with Ajax and the RadAjaxManager.  The editor has a fixed height and 100% width.  The pane has 100% width.

If the tab in which the editor is shown is not the active tab when the Ajax call updates the screen, the ribbonbar doesn't seem to render right.  It'll look like my screenshot in attachment snag-0002 or snag-0004 or snag-0005.  It will render properly if the editor is in the visible tab when the screen is updated.

It does this in the latest versions of Chrome and Firefox and Telerik 2011.2.712 and .NET 4.0.

I know it's a common problem to have complex controls like this render improperly when they are first loaded while hidden.  Any ideas how to fix it in this case?  I know I could switch back to the traditional toolbar to fix this but I'd hate to do that...

(I did try setting the RadPage and RadEditor to fixed widths but it didn't fix the problem)

[Nikolay Tsenkov]

Hi Ron,

Thank you for reporting this problem. As a small act of gratitude, I will update your telerik points.

Since the Service Pack for Q2 2011 is already knocking on the door, I cannot commit on releasing the fix for this problem by this time. But as soon as we are ready, you will be able to get the fix in a Latest Internal Build.

You will be able to fix it, by calling the repaint method of the RadEditor's client object on change of tab selection client event. This is required, since RadRibbonBar needs to know sizes when initialized on the client, and when the content is out of the page's flow (the container is set with style display: none) RibbonBar cannot properly initialize.

For now you can use the RenderSelectedPageOnly="true" on RadMultiPage in order to always render the RibbonBar visible and therefore resized properly.

We will notify you, as soon as we are ready with the fix.

Regards,
Nikolay Tsenkov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Nikolay Tsenkov]

Hi Ron,

We have implemented the fix. You will be able to get it in the upcoming Service Pack for Q2 2011.

Simply call the repaint method on the editor client object, after you make it visible.

Regards,
Nikolay Tsenkov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Ron Michael Zettlemoyer]

Awesome, thank you Nikolay!

[Ron Michael Zettlemoyer]

Perhaps you shouldn't have rushed to make the change for service pack 2.  :)   It seems you fixed it in one way but broke it even worse in another.  

http://www.telerik.com/community/forums/aspnet-ajax/editor/issue-with-radeditor-rendering-instead-radmultipage-radtabstrip-with-ribbon-bar-toolbar.aspx

The editor doesn't seem to render right at all now for me if it's in the active tab after an ajax refresh.

[Ron Michael Zettlemoyer]

The more I play with it, the more I find the latest service pack very buggy in regards to how the RibbonBar and Editor render - mostly in IE 9.  I'm finding so many problems I don't even know where to begin.

[Nikolay Tsenkov]

Hi Ron,

Could you, please, send me a sample reproducing the problem(s) you experience?

We will do our best to resolve the issues. And even if we resolve them in our code-base - you will be able to get the change no more than a week after the fix is made in the form of internal build.


Regards,

Nikolay Tsenkov
the Telerik team