RadRotator not resizing on browser resize

9 posts, 0 answers
  1. Ronan BARRANGER
    Ronan BARRANGER avatar
    24 posts
    Member since:
    Mar 2010

    Posted 15 Mar 2012 Link to this post

    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

  2. Slav
    Admin
    Slav avatar
    1359 posts

    Posted 19 Mar 2012 Link to this post

    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.
  3. Bertha
    Bertha avatar
    63 posts
    Member since:
    Aug 2012

    Posted 30 Jan 2013 Link to this post

    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.
  4. Slav
    Admin
    Slav avatar
    1359 posts

    Posted 01 Feb 2013 Link to this post

    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.
  5. David
    David avatar
    3 posts
    Member since:
    Jul 2012

    Posted 09 Feb Link to this post

    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.

  6. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3809 posts

    Posted 10 Feb Link to this post

    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.
  7. David
    David avatar
    3 posts
    Member since:
    Jul 2012

    Posted 10 Feb in reply to Marin Bratanov Link to this post

    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.

  8. Marin Bratanov
    Admin
    Marin Bratanov avatar
    3809 posts

    Posted 10 Feb Link to this post

    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.
  9. David
    David avatar
    3 posts
    Member since:
    Jul 2012

    Posted 10 Feb in reply to Marin Bratanov Link to this post

    Thanks Marin, exactly what I needed.
Back to Top