Using jQuery 1.3.2 to center a RadAjaxLoadingPanel

2 posts, 1 answers
  1. Answer
    Chris
    Chris avatar
    35 posts
    Member since:
    Mar 2008

    Posted 10 Nov 2009 Link to this post

    Requirements

    RadControls version

    2009 Q1

    .NET version

    3.5

    Visual Studio version

    2008 SP1

    programming language

    Javascript, jQuery

    browser support

    all browsers supported by RadControls


    PROJECT DESCRIPTION
    This is a short example of how to use jQuery to center a loading panel on the screen. Hope this is helpful!

    1. Add the jQuery 1.3.2 scripts to the ASP.NET page.
    <script type="text/javascript" src="Scripts/jquery-1.3.2.min.js"></script> 
     

    2. Create a jQuery extension to center an element.
    jQuery.fn.center = function() {  
        this.css("position""absolute");  
     
        this.css("top", ($(window).height() - this.height()) / 2 + $(window).scrollTop() + "px");  
        this.css("left", ($(window).width() - this.width()) / 2 + $(window).scrollLeft() + "px");  

    3. Make use of the OnRequestStart client side event handler for the RadAjaxManager or RadAjaxPanel controls.
    <telerik:RadAjaxManager ID="PageAjaxManager" runat="server">  
        <ClientEvents OnRequestStart="AjaxRequestStart" /> 
        <AjaxSettings> 
            <telerik:AjaxSetting AjaxControlID="MainToolBar">  
                <UpdatedControls> 
                    <telerik:AjaxUpdatedControl ControlID="MainToolBar" /> 
                    <telerik:AjaxUpdatedControl ControlID="CurrentCostCentersGrid" LoadingPanelID="loadingLarge" /> 
                </UpdatedControls> 
        </telerik:AjaxSetting> 
        </AjaxSettings> 
    </telerik:RadAjaxManager> 
    <telerik:RadAjaxLoadingPanel ID="loadingLarge" runat="server" IsSticky="true">  
        <img src="Images/loading.gif" alt="Loading..." /> 
    </telerik:RadAjaxLoadingPanel> 
     

    4. Get a refrence to the client side ID and pass it into the center function
    function AjaxRequestStart(sender, eventArgs) {  
        var loadingPanel = "#<%= loadingLarge.ClientID %>";  
        $(loadingPanel).center();  
  2. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 13 Nov 2009 Link to this post

    Hello Chris,

    Thank you for sharing your experience with the community. I hope the other members will find you sample useful.
    Additionally, I have updated your Telerik points.

    Best wishes,
    Iana
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top