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

Vertically Centering AjaxLoadingPanel within Grid

6 Answers 137 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
briankb
Top achievements
Rank 2
briankb asked on 16 Aug 2008, 09:24 PM
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?




6 Answers, 1 is accepted

Sort by
0
Kevin Babcock
Top achievements
Rank 1
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
0
briankb
Top achievements
Rank 2
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.
0
Dimo
Telerik team
answered on 18 Aug 2008, 02:47 PM
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.
0
briankb
Top achievements
Rank 2
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?

0
Dimo
Telerik team
answered on 21 Aug 2008, 02:10 PM
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.
0
Lucas County Information Services
Top achievements
Rank 1
answered on 29 Sep 2008, 01:42 PM
Doesn't this defeat the purpose of stylesheets?
Tags
Ajax
Asked by
briankb
Top achievements
Rank 2
Answers by
Kevin Babcock
Top achievements
Rank 1
briankb
Top achievements
Rank 2
Dimo
Telerik team
Lucas County Information Services
Top achievements
Rank 1
Share this question
or