[Solved] Radwindow html place holder and asp.net rad editor

[Kyle Watson]

I'm trying to use the asp.net rad editor inside silverlight because you dont have an html editor and silverlight radrichtextbox is not even close.

So, basically I have it working but I am experiencing some minor problems. First, I have the editor being displayed inside of a htmlplaceholder. The place holder is located on a radwindow.

<telerik:RadWindow  x:Class="Views.HtmlEmail"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
   xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
    mc:Ignorable="d"
    d:DesignHeight="600" d:DesignWidth="800">

    <Grid x:Name="LayoutRoot" Background="White">
        <Grid.RowDefinitions>
            <RowDefinition Height="100"></RowDefinition>
            <RowDefinition Height="400*"></RowDefinition>
        </Grid.RowDefinitions>


        <telerik:RadHtmlPlaceholder Visibility="Visible"    SourceUrl="http://localhost:52878/Editor.aspx" Grid.Row="1" Name="placeholder" />
        <telerik:RadButton Content="Button" Height="Auto" HorizontalAlignment="Left" Margin="146,34,0,0" Name="radButton1" VerticalAlignment="Top" Width="Auto" Click="radButton1_Click" />
    </Grid>
</telerik:RadWindow>

So, it shows up. I can get and set the html using javascript, for example:

// Get the IFrame from the HtmlPresenter  

            HtmlElement iframe = (HtmlElement)this.placeholder.HtmlPresenter.Children[0];

            // Set an ID to the IFrame so that can be used later when calling the javascript  

            iframe.SetAttribute("id", "myIFrame");

  

  

            html = html.Replace("'",@"""");

  

            html = html.Replace(Environment.NewLine, "");

  

              

              

            // Code to be executed  

            string code = @"document.getElementById('myIFrame').contentWindow.test('" + html + "');";

  

            HtmlPage.Window.Eval(code);


//asp.net inside body element

<

 

 

script id="javascript1" type="text/javascript">

 

 

 

function test(html) {

 

 

 

 

var editor = $find("<%=RadEditor1.ClientID%>");

 

 

editor.set_html(html);

 

}

 

 

 

</script>

 

So, everything works fine. However, two problems:

1. When you drag the radwindow around the html placeholder content disappears and only shows a white background. This goes away when you are done dragging the window then the content reappears.

2. The biggest problem is this one. When I minimize the radwindow to the docking surface and then remaximize the window the asp.net content resets itself and goes blank. Let me know if i'm doing something incorrectly.

[Kiril Stanoev]

Hi Kyle,

Thank you for contacting us.

1. When you drag the radwindow around the html placeholder content disappears and only shows a white background. This goes away when you are done dragging the window then the content reappears.

This is expected behavior. In its core, RadHtmlPlacehoder is an IFrame that is placed on top of the Silverlight plugin. Therefore when it is used in transformation extensive scenarios (ex: dragging the window around) it has to be hidden and shown only after the dragging completes. If we don't hide it, you will still be able to move the window but without the HtmlPlaceholder.

2. The biggest problem is this one. When I minimize the radwindow to the docking surface and then remaximize the window the asp.net content resets itself and goes blank. Let me know if i'm doing something incorrectly.

Could you please explain in more details to what you refer by saying docking surface. My guess is that when you minimized the window, RadHtmlPlaceholder throws its Unloaded event and unloads its content. If RadHtmlPlaceholder fires the Unloaded event, you can use the KeepContentInMemory="False" property to workaround that behavior.

Give it a try and let me know how I can be of further assistance.

Best wishes,
Kiril Stanoev
the Telerik team

[Kyle Watson]

Ok the problem happens when you enter full screen mode and after reading the posts there isn't anything you can do about it.

However, is there anything you can do to honor the z-index or does the Iframe always render on top of every control? For example, the html content is always on top even if other windows overlap the htmlplaceholder.

[Kyle Watson]

Another issue.

I am setting the html using this code:

function SetHtml(html)
       {
           try {
               alert(html);
               this.html = html;
               var editor = $find("<%=RadEditor1.ClientID%>");
               editor.set_html(html);
           }
           catch (ex) {
               alert(ex);
           }
       }

It works the first time. But when you close the first Radwindow, and reopen a new one the html can no longer be set. This code simply doesn't do anything after I reopen the radwindow:

private void radButton1_Click(object sender, RoutedEventArgs e)
     {
         // Get the IFrame from the HtmlPresenter
         HtmlElement iframe = (HtmlElement)this.placeholder.HtmlPresenter.Children[0];
         // Set an ID to the IFrame so that can be used later when calling the javascript
         iframe.SetAttribute("id", "myIFrame");
         html = html.Replace("'",@"""");
         html = html.Replace(Environment.NewLine, "");

         // Code to be executed
         string code = @"document.getElementById('myIFrame').contentWindow.SetHtml('" + html + "');";
         HtmlPage.Window.Eval(code);
     }

So to clarify. I open a radwindow using the OpenWindow().Then I click a button on the radwindow form that executes the above code. Everything works correctly. Then I close the window. Then I open a radwindow using the OpenWindow(). Then I click a button on the radwindow form that executes the above code. But now it no longer works or does anything. I stepped through the code and it looks like everything is working correctly. I have an alert(html) code that shows what html it is trying to set on the radeditor and this stays the same when you close and reopen windows.





Also, I have a suggestion. Is it possible to build into this control or at least set it up so when the Radwindow loses focus to anything outside of itself it could take a snap shot of the html as an image, then it should hide the iframe / div object then overlay the image onto the html place holder. That way when the radwindow loses focus the contents would correctly hide behind other silverlight controls because it would just be an image. Or perhaps just have this has a mode. Right now the htmlplaceholder is a little quirky.

[Tina Stancheva]

Hi Kyle Watson,

Please accept my apology for the delayed response.

I can only reproduce this issue when the RadHtmlPlaceHolder KeepContentInMemory property is set to True. Setting this property causes the RadHtmlPlaceHolder's HtmlPresenter not be cleared when unloading the control thus causing the described behavior.

So if this is your case, you can handle the RadWindow PreviewClosed() event and set the RadHtmlPlaceHolder KeepContentInMemory property to False:

private void RadWindow_PreviewClosed(object sender, WindowPreviewClosedEventArgs e)
{
   this.placeholder.KeepContentInMemory = false;
}

Can you please give this a try and let us know how it goes. Thank you in advance.

Best wishes,
Tina Stancheva
the Telerik team

[Mahendra]

Hello

 I dont want to hide RadHtmlPlaceholder when draging or resize of Radwindow. What should I do for that.

Thanks,
Mahendra

[Kiril Stanoev]

Hello Mahendra,

Thank you for contacting us. As Tina said in one of her replies, this is a known limitation of RadHtmlPlaceholder in scenarios that involve RadWindow and dragging. Unfortunately there is no workaround for it. Sorry for the inconvenience caused.

Best wishes,
Kiril Stanoev
the Telerik team

[Rory]

This workaround when called at OnClientDragStart fixes your problem number one,

<script type="text/javascript">

function WindowDragStart(oWin, args)

{

var resizeExtender = oWin._resizeExtender;


resizeExtender.set_hideIframes(false);

}

</script>