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?
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
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:
I hope this helps. If you have further questions, please don't hesitate to ask.
Regards,
Kevin Babcock
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.
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
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.
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
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
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
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.
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?