RadRotator not resizing on browser resize

[Ronan BARRANGER]

Greetings,

I'm currently trying to resize this control on browser resize.
I tried to look on the forums before asking. I found a Javascript function ( which is not working unfortunately).

    <script type="text/javascript">

window.onresize = function()
{
    var rotatorElement = document.getElementById("ContentPlaceHolder1_RadRotator1" + "_Div");
    rotatorElement.RadResize();
}

</script>

Error : RadResize undefined.

Thanks in advance for your help

[Slav]

Hello Ronan,

You can resize the RadRotator control according to the browser window via additional client-side script and an Ajax request to the server. This is required because the size of the RadRotator's items should also be changed when the control is resized in order to preserve its proper functionality. The items of a RadRotator should always be configured to fit in its ViewPort as explained in this help article.

You can find attached a sample page that implements the suggested approach and will help you incorporate this feature into your actual project.

Kind regards,
Slav
the Telerik team

[Bertha]

I want to use a simple solution as suggested in
http://www.telerik.com/community/forums/aspnet-ajax/rotator/radrotator-resizing-issue.aspx

window.onresize=function()

  {  

     var rotatorElement = $get("<%= Rttr.ClientID %>");    

      rotatorElement.style.width = "225px";

      rotatorElement.style.height= "285px";  

   }

But why it is not working?  I used alert to check the style.width and it was set correctly. But the rotator was not refreshed.

[Slav]

Hello Bertha,

Changing the size of the RadRotator on the client is not possible, because it will break the calculations that are performed when the items of the control are rotated. The solution that I would suggest is to make an AJAX request in order to update the size of the rotator and its items on the server. This approach is described in the Knowledge Base article Setting RadRotator's size in percent. Please use it as a reference for implementing the desired functionality in your actual project.

Greetings,
Slav
the Telerik team

[David]

Hi Slav,

Is it possible to use RadXmlHttpPanel, instead to update the RadRotator control, as I have a RadCaptch on the same page which doesn't like the AjaxPanel, as it seems to cause the Captcha to change even though the image stays the same.

[Marin Bratanov]

Hi David,

I must first start by noting that the Lightweight RenderMode of the rotator offers fluid capabilities since mid-2014: http://docs.telerik.com/devtools/aspnet-ajax/controls/rotator/mobile-support/fluid-capabilities. I advise you try this approach first.

As for RadXmlHttpPanel—you should use it to return data, not controls, because that's how callbacks are designed. I advise you review the following articles before choosing a course of action:

• http://docs.telerik.com/devtools/aspnet-ajax/controls/xmlhttppanel/getting-started/differences-between-radxmlhttppanel-and-radajaxpanel
• http://docs.telerik.com/devtools/aspnet-ajax/controls/xmlhttppanel/troubleshooting

Regards,

Marin Bratanov
Telerik by Progress

[David]

Hi Marin,

 

Ideally I need the itemwidth to be responsive also.  If viewed on a mobile device I need the text to wrap.  I can't know what the itemsize will be as it is just text, so I cannot set this correctly for all window sizes.  The method I'm using is to hook into the window resize event and then reset the itemwidth but sadly using AJAX call is not compatible with RadCaptcha.

[Marin Bratanov]

Hi David,

The captcha control can work with AJAX, take this for example. The key thing is that the captcha is part of the AJAX respons always, so it can show the new image to the user. Then, it is configured to not persist the same image across requests because the user will see a new image every time.

<asp:UpdatePanel ID="Updatepanel1" runat="server" UpdateMode="Always">
    <ContentTemplate>
        <telerik:RadCaptcha CaptchaImage-PersistCodeDuringAjax="false" EnableRefreshImage="true" runat="server" ID="RadCaptcha1"></telerik:RadCaptcha>
        <asp:Button ID="Button1" Text="just an AJAX request with the captcha in it" runat="server" />
        <asp:Button ID="Button2" Text="validate capthca" OnClick="Button2_Click" runat="server" />
        is valid: <asp:Label ID="Label1" Text="" runat="server" />
    </ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button3" Text="just a postback" runat="server" />

protected void Button2_Click(object sender, EventArgs e)
{
    Label1.Text = RadCaptcha1.IsValid.ToString();
}

Regards,

Marin Bratanov
Telerik by Progress

[David]

Thanks Marin, exactly what I needed.