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

Loading Panel not showing AjaxManager/Custom Server control

4 Answers 113 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Chris Trina
Top achievements
Rank 1
Chris Trina asked on 30 Apr 2008, 12:02 AM
I have a custom server control that manages paging for my data grid.  I've connected the server control to the data grid via the rad ajax manager and that is working great.  The only problem is I cannot get the loading panel to show.  On this same page I also have a search button attached to the datagrid via the ajax manager and the loading panel works fine for this.

Any thoughts?

4 Answers, 1 is accepted

Sort by
0
Todd Anglin
Top achievements
Rank 2
answered on 30 Apr 2008, 03:10 AM
Chris-

Can you show us some sample markup from your page? Specifically, the markup that shows how you've configured your RadAjaxLoadingPanel and your RadAjaxManager. This will help us analyze what's going on and provide you with some guidance. In general, the scenario you're describing should work without issue, so there is clearly a simple configuration problem at play here.

As soon as I see your code, I'll be happy to provide more advice.

-Todd
0
Chris Trina
Top achievements
Rank 1
answered on 30 Apr 2008, 11:30 AM
Todd,

Thanks for the response, here is the markup. 

The first control lblStatus is typically invisible and would hold a message if there was no data display.  The 2nd control, Pager1 is the custom server control that shows the number of pages and allows you to navigate through them.  Finally you will see the datagrid, dgCourses.

When you get to the AJAXManager you will see that two controls, Pager1 and a button are set to initiate the ajax refreshes.  The button works completely fine, and the pager works fine, except the loading panel does not display.

Thanks for any insight.

Chris

<tr>

<td colspan=2>

<asp:label id="lblStatus" runat="server" CssClass="cssContent" Width="468px"></asp:label>

</td>

</tr>

<tr>

<td colspan=2>

<cc1:pager id="Pager1" runat="server" CssClass="content" Width="100%" Font-Names="Verdana" Font-Size="X-Small"

MaxPages="10" ShowAddNew="False" PageSize="10" ShowNextPrevPages="True">

<FirstIcon DisabledImageURL="~/Images/nav_first.gif" ImageAlign="AbsMiddle" IconDisplayStyle="Image"

Text="|&amp;lt;" Width="" Height="" ImageURL="~/Images/nav_first.gif"></FirstIcon>

<NextIcon DisabledImageURL="" ImageAlign="AbsMiddle" IconDisplayStyle="Image" Text="&amp;gt;"

Width="" Height="" ImageURL="~/Images/nav_next.gif"></NextIcon>

<PreviousPagesIcon DisabledImageURL="" ImageAlign="AbsMiddle" IconDisplayStyle="Image" Text="&amp;lt;&amp;lt;"

Width="" Height="" ImageURL="~/Images/nav_backpages.gif"></PreviousPagesIcon>

<AddNewIcon DisabledImageURL="" ImageAlign="AbsMiddle" IconDisplayStyle="Text" Text="&amp;gt;*"

Width="" Height="" ImageURL=""></AddNewIcon>

<NextPagesIcon DisabledImageURL="" ImageAlign="AbsMiddle" IconDisplayStyle="Image" Text="&amp;gt;&amp;gt;"

Width="" Height="" ImageURL="~/Images/nav_nextpages.gif"></NextPagesIcon>

<LastIcon DisabledImageURL="~/Images/nav_last.gif" ImageAlign="AbsMiddle" IconDisplayStyle="Image"

Text="&amp;gt;|" Width="" Height="" ImageURL="~/Images/nav_last.gif"></LastIcon>

<PreviousIcon DisabledImageURL="" ImageAlign="AbsMiddle" IconDisplayStyle="Image" Text="&amp;lt;"

Width="" Height="" ImageURL="~/Images/nav_back.gif"></PreviousIcon>

</cc1:pager>

</td>

</tr>

<tr>

<td colspan=2>

<asp:datagrid id="dgCourses" runat="server"

CssClass="cssContent" Width="100%" Height="32px" AutoGenerateColumns="False" CellPadding="3"

BorderWidth="1px" BorderColor="Silver" ShowFooter="True" OnItemCommand="GridClicked" GridLines=none

BorderStyle="Solid">

<EditItemStyle CssClass="cssSelectedRow"></EditItemStyle>

<AlternatingItemStyle CssClass="cssEvenRow"></AlternatingItemStyle>

<ItemStyle CssClass="cssOddRow"></ItemStyle>

<HeaderStyle CssClass="cssHeaderRow"></HeaderStyle>

<FooterStyle CssClass="cssFooterRow"></FooterStyle>

<Columns>

<asp:BoundColumn Visible="False" DataField="CourseID" ReadOnly="True"></asp:BoundColumn>

<asp:TemplateColumn HeaderText="Grade Level">

<ItemStyle Width="45px" VerticalAlign="Top"></ItemStyle>

<ItemTemplate>

<%

# Container.DataItem("StartGrade")%>

-

<%

# Container.DataItem("EndGrade")%>

</ItemTemplate>

</asp:TemplateColumn>

<asp:TemplateColumn HeaderText="Department">

<ItemStyle Width="160px" VerticalAlign="Top"></ItemStyle>

<ItemTemplate>

<%

# Container.DataItem("Department")%>

</ItemTemplate>

</asp:TemplateColumn>

<asp:TemplateColumn HeaderText="Course">

<ItemStyle VerticalAlign="Top"></ItemStyle>

<ItemTemplate>

<asp:LinkButton CommandName="edit" Runat="server" ID="Linkbutton1">

<%

# Container.DataItem("CourseName")%>

</asp:LinkButton>

</ItemTemplate>

</asp:TemplateColumn>

<asp:TemplateColumn HeaderText="Delete" HeaderStyle-HorizontalAlign=Center>

<ItemStyle Width="40px" VerticalAlign="Top" HorizontalAlign=Center></ItemStyle>

<ItemTemplate>

<asp:ImageButton ImageUrl="../Images/delete.gif" AlternateText="Delete" CommandName="Delete" Runat="server"

ID="imgDelete"></asp:ImageButton>

</ItemTemplate>

</asp:TemplateColumn>

</Columns>

</asp:datagrid>

</td>

</tr>

</table>

<uc1:bottom id="Bottom1" runat="server"></uc1:bottom>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="btnSearch">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="lblStatus" />

<telerik:AjaxUpdatedControl ControlID="Pager1" />

<telerik:AjaxUpdatedControl ControlID="dgCourses" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="Pager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="lblStatus" />

<telerik:AjaxUpdatedControl ControlID="Pager1" />

<telerik:AjaxUpdatedControl ControlID="dgCourses" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"

Width="75px">

<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading3.gif") %>'

style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" />

</telerik:RadAjaxLoadingPanel>

0
Chris Trina
Top achievements
Rank 1
answered on 30 Apr 2008, 11:31 AM
Todd,

Thanks for the response, here is the markup. 

The first control lblStatus is typically invisible and would hold a message if there was no data display.  The 2nd control, Pager1 is the custom server control that shows the number of pages and allows you to navigate through them.  Finally you will see the datagrid, dgCourses.

When you get to the AJAXManager you will see that two controls, Pager1 and a button are set to initiate the ajax refreshes.  The button works completely fine, and the pager works fine, except the loading panel does not display.

Thanks for any insight.

Chris

<tr>

<td colspan=2>

<asp:label id="lblStatus" runat="server" CssClass="cssContent" Width="468px"></asp:label>

</td>

</tr>

<tr>

<td colspan=2>

<cc1:pager id="Pager1" runat="server" CssClass="content" Width="100%" Font-Names="Verdana" Font-Size="X-Small"

MaxPages="10" ShowAddNew="False" PageSize="10" ShowNextPrevPages="True">

<FirstIcon DisabledImageURL="~/Images/nav_first.gif" ImageAlign="AbsMiddle" IconDisplayStyle="Image"

Text="|&amp;lt;" Width="" Height="" ImageURL="~/Images/nav_first.gif"></FirstIcon>

<NextIcon DisabledImageURL="" ImageAlign="AbsMiddle" IconDisplayStyle="Image" Text="&amp;gt;"

Width="" Height="" ImageURL="~/Images/nav_next.gif"></NextIcon>

<PreviousPagesIcon DisabledImageURL="" ImageAlign="AbsMiddle" IconDisplayStyle="Image" Text="&amp;lt;&amp;lt;"

Width="" Height="" ImageURL="~/Images/nav_backpages.gif"></PreviousPagesIcon>

<AddNewIcon DisabledImageURL="" ImageAlign="AbsMiddle" IconDisplayStyle="Text" Text="&amp;gt;*"

Width="" Height="" ImageURL=""></AddNewIcon>

<NextPagesIcon DisabledImageURL="" ImageAlign="AbsMiddle" IconDisplayStyle="Image" Text="&amp;gt;&amp;gt;"

Width="" Height="" ImageURL="~/Images/nav_nextpages.gif"></NextPagesIcon>

<LastIcon DisabledImageURL="~/Images/nav_last.gif" ImageAlign="AbsMiddle" IconDisplayStyle="Image"

Text="&amp;gt;|" Width="" Height="" ImageURL="~/Images/nav_last.gif"></LastIcon>

<PreviousIcon DisabledImageURL="" ImageAlign="AbsMiddle" IconDisplayStyle="Image" Text="&amp;lt;"

Width="" Height="" ImageURL="~/Images/nav_back.gif"></PreviousIcon>

</cc1:pager>

</td>

</tr>

<tr>

<td colspan=2>

<asp:datagrid id="dgCourses" runat="server"

CssClass="cssContent" Width="100%" Height="32px" AutoGenerateColumns="False" CellPadding="3"

BorderWidth="1px" BorderColor="Silver" ShowFooter="True" OnItemCommand="GridClicked" GridLines=none

BorderStyle="Solid">

<EditItemStyle CssClass="cssSelectedRow"></EditItemStyle>

<AlternatingItemStyle CssClass="cssEvenRow"></AlternatingItemStyle>

<ItemStyle CssClass="cssOddRow"></ItemStyle>

<HeaderStyle CssClass="cssHeaderRow"></HeaderStyle>

<FooterStyle CssClass="cssFooterRow"></FooterStyle>

<Columns>

<asp:BoundColumn Visible="False" DataField="CourseID" ReadOnly="True"></asp:BoundColumn>

<asp:TemplateColumn HeaderText="Grade Level">

<ItemStyle Width="45px" VerticalAlign="Top"></ItemStyle>

<ItemTemplate>

<%

# Container.DataItem("StartGrade")%>

-

<%

# Container.DataItem("EndGrade")%>

</ItemTemplate>

</asp:TemplateColumn>

<asp:TemplateColumn HeaderText="Department">

<ItemStyle Width="160px" VerticalAlign="Top"></ItemStyle>

<ItemTemplate>

<%

# Container.DataItem("Department")%>

</ItemTemplate>

</asp:TemplateColumn>

<asp:TemplateColumn HeaderText="Course">

<ItemStyle VerticalAlign="Top"></ItemStyle>

<ItemTemplate>

<asp:LinkButton CommandName="edit" Runat="server" ID="Linkbutton1">

<%

# Container.DataItem("CourseName")%>

</asp:LinkButton>

</ItemTemplate>

</asp:TemplateColumn>

<asp:TemplateColumn HeaderText="Delete" HeaderStyle-HorizontalAlign=Center>

<ItemStyle Width="40px" VerticalAlign="Top" HorizontalAlign=Center></ItemStyle>

<ItemTemplate>

<asp:ImageButton ImageUrl="../Images/delete.gif" AlternateText="Delete" CommandName="Delete" Runat="server"

ID="imgDelete"></asp:ImageButton>

</ItemTemplate>

</asp:TemplateColumn>

</Columns>

</asp:datagrid>

</td>

</tr>

</table>

<uc1:bottom id="Bottom1" runat="server"></uc1:bottom>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="btnSearch">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="lblStatus" />

<telerik:AjaxUpdatedControl ControlID="Pager1" />

<telerik:AjaxUpdatedControl ControlID="dgCourses" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="Pager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="lblStatus" />

<telerik:AjaxUpdatedControl ControlID="Pager1" />

<telerik:AjaxUpdatedControl ControlID="dgCourses" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"

Width="75px">

<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading3.gif") %>'

style="border-right: 0px; border-top: 0px; border-left: 0px; border-bottom: 0px" />

</telerik:RadAjaxLoadingPanel>

0
Chris Trina
Top achievements
Rank 1
answered on 30 Apr 2008, 12:06 PM
One more update, today I tried adding client code to capture the requestStart and responseEnd events to manually show the panel.  The code works fine for the button, but the events don't seem to be raised if the request is initated via the server control.....

Chris
Tags
Ajax
Asked by
Chris Trina
Top achievements
Rank 1
Answers by
Todd Anglin
Top achievements
Rank 2
Chris Trina
Top achievements
Rank 1
Share this question
or