Loading Panel

[Rob Teegarden]

Hello,

I am in the process of upgrading my controls to Prometheus.  I have a bit of an issue with the new UI when it comes to the Ajax Loading Panel for the new grid.

I found the example below on how to Ajaxify the grid:

	<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
	<AjaxSettings>
	<telerik:AjaxSetting AjaxControlID="RadGrid1">
	<UpdatedControls>
	<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"/>
	</UpdatedControls>
	</telerik:AjaxSetting>
	</AjaxSettings>
	</telerik:RadAjaxManager>
	<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" Transparency="25">
	<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border:0;" />
	</telerik:RadAjaxLoadingPanel>

It does work, but the UI is not like features in RadGrid.  The old settings for the grid like this:

EnableAJAX="True" EnableAJAXLoadingTemplate="True"
LoadingTemplateTransparency="20"

Made the update panel take over the entire grid not matter what size it was, it was just a much cleaner approach.  Is there a way to do that with this new grid?

TIA

[Steve]

Hi Rob,

Try applying positioning for the loading panel in order to achieve this:

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px" Width="75px" Transparency="25">
<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border:0; position:relative;top:50%;left:50%;" />
</telerik:RadAjaxLoadingPanel>

Hope this helps.

Greetings,
Steve
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Rob Teegarden]

No, that wasn't what I was looking for.  That just moved the image to the right of the grid and centered vertically.  I was trying to make it look like the old control did.

However, I did figure it out the with your idea:

<telerik:RadAjaxLoadingPanel ID="alpMain" runat="server" Height="75px" Width="75px" Transparency="25" BackColor="#FFFFFF">
    <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>' style="border: 0; margin-top: 50px;" />
</telerik:RadAjaxLoadingPanel>

[garfield]

I'm having a similar problem.

I'm trying to set a transparent loading panel for a prometheus grid.

I've seen in this example that if I want a loading panel I have to define the loading panel in a separate label, and I have to include the object I want loaded in a RadAjaxPanel.

In the provided example, the loading panel is applied on a calendar and on a GridView and I have no problems with them. My problem comes when I set a prometheus radGrid. At first the intellisense from visual studio marks the grid labels as error or unknown labels, and when I execute (with no compiling errors), the loading panel is completely solid.

Is there any way to make it work just as the old grid?

[Rob Teegarden]

If you just copy what I have posted above your post it should work just like the old grid.  Notice the trasnsparency is set in the RadAjaxLoadingPanel. 

You no longer add these tags to your grid:

EnableAJAXLoadingTemplate="True" LoadingTemplateTransparency="20"

[garfield]

Thanks for your fast answer Rob, but my problem isn't solved yet

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadGrid1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
    <asp:Calendar ID="Calendar1" runat="server" BackColor="#E0E0E0"></asp:Calendar>
</telerik:RadAjaxPanel>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Transparency="25" BackColor="#E0E0E0">
    <asp:Image ID="Image1" ImageUrl="~/skins/Default/AJAX/Loading.gif" BorderWidth="0px" AlternateText="Loading" runat="server" Style="margin-top: 45px;"></asp:Image>
</telerik:RadAjaxLoadingPanel>

<telerik:RadGrid runat="server" ID="RadGrid1" AutoGenerateColumns="false" GridLines="None" Skin="Telerik" AllowPaging="true" PageSize="100" AllowSorting="true">
    <grid things>
</telerik:RadGrid>

Here I'm posting some code.

As you can see I set a calendar inside an ajaxpanel and I set a loadingpanel with transparency. It works great

I also set a radGrid inside an ajax manager, the ajax works, but using exacly the same loading panel, it's not transparent.

[Rob Teegarden]

That code seems to work for my in my context, not really sure what the problem is.  Maybe you can start a ticket with support, or they might pipe in here.  Sorry I couldn't be of help.

[garfield]

I've fixed my problem. I don't know if it is a general issue or just a particular problem of my code.

The thing is that if I use a pagesize higher than 80, transparency in the radAjaxLoadingPanel doesn't work.

By setting it to 50 I haven't any more problems

Thanks for all your answers