This is a migrated thread and some comments may be shown as answers.

RadRotator not resizing on browser resize

8 Answers 127 Views
Rotator
This is a migrated thread and some comments may be shown as answers.
Ronan BARRANGER
Top achievements
Rank 1
Ronan BARRANGER asked on 15 Mar 2012, 09:29 AM
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

8 Answers, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 19 Mar 2012, 03:33 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
Bertha
Top achievements
Rank 1
answered on 30 Jan 2013, 02:44 PM
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.
0
Slav
Telerik team
answered on 01 Feb 2013, 12:05 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
0
David
Top achievements
Rank 2
answered on 09 Feb 2017, 04:14 PM

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.

0
Marin Bratanov
Telerik team
answered on 10 Feb 2017, 01:44 PM

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:


Regards,

Marin Bratanov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
David
Top achievements
Rank 2
answered on 10 Feb 2017, 03:09 PM
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.

0
Marin Bratanov
Telerik team
answered on 10 Feb 2017, 03:20 PM

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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
David
Top achievements
Rank 2
answered on 10 Feb 2017, 04:22 PM
Thanks Marin, exactly what I needed.
Tags
Rotator
Asked by
Ronan BARRANGER
Top achievements
Rank 1
Answers by
Slav
Telerik team
Bertha
Top achievements
Rank 1
David
Top achievements
Rank 2
Marin Bratanov
Telerik team
Share this question
or