Loading Panel not showing AjaxManager/Custom Server control

5 posts, 0 answers
  1. Chris Trina
    Chris Trina avatar
    86 posts
    Member since:
    Mar 2006

    Posted 29 Apr 2008 Link to this post

    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?
  2. Todd Anglin
    Todd Anglin avatar
    2040 posts
    Member since:
    Aug 2005

    Posted 29 Apr 2008 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Chris Trina
    Chris Trina avatar
    86 posts
    Member since:
    Mar 2006

    Posted 30 Apr 2008 Link to this post

    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>

  5. Chris Trina
    Chris Trina avatar
    86 posts
    Member since:
    Mar 2006

    Posted 30 Apr 2008 Link to this post

    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>

  6. Chris Trina
    Chris Trina avatar
    86 posts
    Member since:
    Mar 2006

    Posted 30 Apr 2008 Link to this post

    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017