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

LoadingPanel and jquery SlideUp

2 Answers 146 Views

Ajax

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

Josh asked on 07 Dec 2011, 10:44 PM

Afternoon everyone, I have a strange issue, when I use the jquery slidup function on a div that contains my 'search' fields and the grid in its own div, everything works fine except the loading panel. it creates its loading panel in side the grid as it should but when search fields div 'slides up' the rest of the html moves up as it should, except the loading panel...

here is some pseudo mark up to explain what i am talking about...

<script>

function hideSearchFields(){

$("#searchDiv").slideUp('medium');

}

</script>

<telerik:RadAjaxManager ID="radAjaxManager" runat="server">

<%--<ClientEvents OnResponseEnd="RadAjaxManagerResponseEnd" />--%>

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="SearchLinkButton">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="ResultsRadGrid" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</AjaxSettings>

</telerik:RadAjaxManager>

</telerik:AjaxSetting>

<div id="searchDiv">

labels textboxes drop downs etc....

<asp:linkbutton id="SearchLinkButton" runat="server" OnClientClick="hideSearchFields();" OnClick="search" />

</div>

<div>

<telerik:radgrid id="ResultsRadGrid runat="server">

my grid

</telerik:radgrid>

</div>

<div>

a bunch more html

</div>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Simple">

</telerik:RadAjaxLoadingPanel>

Any help would be greatly appreciated!

2 Answers, 1 is accepted

Accepted

answered on 08 Dec 2011, 02:47 PM

Hello Josh,

That makes sense because the RadAjaxLoadingPanel is displayed using an absolute position, so it's fixed to the location it first appeared even though you hid the filters, it will not move with the grid. You can even see it happen on the demos:

http://demos.telerik.com/aspnet-ajax/ajax/examples/loadingpanel/loadingimages/defaultcs.aspx

If you click the button and then collapse the configurator you will see the same result.

If you want to it work like you want I would suggest manipulating the top property of the RadAjaxLoadingPanel so it matches the slideUp animation or explictly showing the loading panel after the slideUp animation is finished and hiding it when the ajax request is completed.

Here's a demo on how to show/hide the loading panel explicitly:

http://demos.telerik.com/aspnet-ajax/ajax/examples/loadingpanel/explicitshowhide/defaultcs.aspx

I hope that helps.