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

Vertically Centering AjaxLoadingPanel within Grid

6 Answers 157 Views

Ajax

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

6 Answers, 1 is accepted

answered on 18 Aug 2008, 02:21 AM

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:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title>Untitled Page</title> 
        
                <style type="text/css"> 
        
                    .LoadingPanel { 
        
                        margin-top: 50px; 
        
                    }     
        
                </style> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" /> 
        
                    <telerik:RadGrid ID="RadGrid1" runat="server" 
        
                        AllowPaging="true" 
        
                        PageSize="3" 
        
                        OnNeedDataSource="RadGrid1_NeedDataSource"> 
        
                    </telerik:RadGrid> 
        
                    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" 
        
                        CssClass="LoadingPanel" 
        
                        Transparency="20"> 
        
                        <img alt="Loading..."  
        
                            src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' 
        
                            style="border: 0px;" /> 
        
                    </telerik:RadAjaxLoadingPanel> 
        
                    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"  
        
                        DefaultLoadingPanelID="RadAjaxLoadingPanel1"> 
        
                        <AjaxSettings> 
        
                            <telerik:AjaxSetting AjaxControlID="RadGrid1"> 
        
                                <UpdatedControls> 
        
                                    <telerik:AjaxUpdatedControl ControlID="RadGrid1" /> 
        
                                </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                        </AjaxSettings>          
        
                    </telerik:RadAjaxManager>        
        
                </form> 
        
            </body> 
        
            </html>

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

Regards,
Kevin Babcock

answered on 18 Aug 2008, 02:36 AM

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.

answered on 19 Aug 2008, 03:39 PM

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?

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Vertically Centering AjaxLoadingPanel within Grid

6 Answers, 1 is accepted