Vertically Centering AjaxLoadingPanel within Grid

7 posts, 0 answers
  1. briankb
    briankb avatar
    88 posts
    Member since:
    Feb 2004

    Posted 16 Aug 2008 Link to this post

    I'm using the Q1 2008 version of the RADGrid and RADAjaxLoadingPanel.

    I've added a RadAjaxManager and assigned a loading panel to the grid.

    It dims and centers horizontally inside the grid but how do I get it to center veritically within the grid?




  2. Kevin Babcock
    Kevin Babcock avatar
    189 posts
    Member since:
    Mar 2007

    Posted 17 Aug 2008 Link to this post

    Hello Briankb,

    Adding a custom style rule to your RadAjaxLoadingPanel should get it to the position you want. You can set the CssClass property to a css class and use the style rule of your choice to get the loading panel to appear in the center of your RadGrid. Here is a quick example:

    1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
    2  
    3 <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
    4  
    5 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
    6  
    7 <html xmlns="http://www.w3.org/1999/xhtml"
    8 <head runat="server"
    9     <title>Untitled Page</title> 
    10     <style type="text/css"
    11         .LoadingPanel { 
    12             margin-top: 50px; 
    13         }     
    14     </style> 
    15 </head> 
    16 <body> 
    17     <form id="form1" runat="server"
    18         <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
    19      
    20         <telerik:RadGrid ID="RadGrid1" runat="server" 
    21             AllowPaging="true" 
    22             PageSize="3" 
    23             OnNeedDataSource="RadGrid1_NeedDataSource"
    24         </telerik:RadGrid> 
    25          
    26         <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" 
    27             CssClass="LoadingPanel" 
    28             Transparency="20"
    29             <img alt="Loading..."  
    30                 src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
    31                 style="border: 0px;" /> 
    32         </telerik:RadAjaxLoadingPanel> 
    33          
    34         <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"  
    35             DefaultLoadingPanelID="RadAjaxLoadingPanel1"
    36             <AjaxSettings> 
    37                 <telerik:AjaxSetting AjaxControlID="RadGrid1"
    38                     <UpdatedControls> 
    39                         <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
    40                     </UpdatedControls> 
    41                 </telerik:AjaxSetting> 
    42             </AjaxSettings>          
    43         </telerik:RadAjaxManager>        
    44     </form> 
    45 </body> 
    46 </html> 
    47  


    I hope this helps. If you have further questions, please don't hesitate to ask.

    Regards,
    Kevin Babcock
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. briankb
    briankb avatar
    88 posts
    Member since:
    Feb 2004

    Posted 17 Aug 2008 Link to this post

    First thanks for replying. I appreciate any help or insight I can get.

    I've tried the margin-top before and I tried it again as you show in your example. At least in my page it pushes the entire loading panel down 50px background and "loading" image.

    What I would like is the actual loading image be centered both horizontal and vertical within the grid. I know it's possible I see it all over the demo's but I can't figure out how they do it. If I only rely on an absolute value and the user changes how many rows are shown in the grid the loading image will still not be centered.

    thanks again and I look forward to finding a solution.
  5. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 18 Aug 2008 Link to this post

    Hello Brian,

    Since the loading panel automatically places itself on top of the updated control and assumes its dimensions, it will be a lot easier to center the image when it is a background image of the panel:


    ASPX

    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" Transparency="30" CssClass="LoadingPanel"></telerik:RadAjaxLoadingPanel>


    CSS

    .LoadingPanel
    {
        background: url(..........) center center no-repeat ;
    }



    Greetings,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  6. briankb
    briankb avatar
    88 posts
    Member since:
    Feb 2004

    Posted 19 Aug 2008 Link to this post

    Thanks. I hope that will work. I ran into a bit of a snag however since the background is an embedded resource.

    I tried
    <style type="text/css">  
        .LoadingPanel  
        {  
            background: url('<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>') center center no-repeat ;  
        }  
    </style> 

    And immediately ran into the issue described here http://www.telerik.com/help/aspnet/combobox/tree_move_codeblocks.html but the style is not in the header and just to make sure I just tried adding a 
    <img src="<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>/> 
     

    and removed the style reference to the page and that had the same issue.

    How do I get around the embedded resource issue?

  7. Dimo
    Admin
    Dimo avatar
    8333 posts

    Posted 21 Aug 2008 Link to this post

    Hi Brian,

    Please enclose the <style> tag inside a <telerik:RadCodeBlock />

    http://www.telerik.com/help/aspnet-ajax/ajxradscriptblockradcodeblock.html

    Greetings,
    Dimo
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
  8. Lucas County Information Services
    Lucas County Information Services avatar
    40 posts
    Member since:
    Feb 2008

    Posted 29 Sep 2008 Link to this post

    Doesn't this defeat the purpose of stylesheets?
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017