Loading Panel for Dummies?

[jerry]

Is there some basic tutorial on how to do Loading Panels?  I can't seem to figure them out.  This code below should populate a radgrid with many rows of data.  I want to see a loading message while it does.


HTML

<asp:ScriptManager ID="ScriptManager1" runat="server">
      </asp:ScriptManager>
  <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="dgTest">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>

  <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
                Width="75px" IsSticky="True" MinDisplayTime="100">
                <img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'
                    style="border: 0px;" />
            </telerik:RadAjaxLoadingPanel>

<asp:Panel ID="Panel1" runat="server">
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</asp:Panel>

  <asp:Button ID="Button1" runat="server" Text="Test Loading"
    onclick="Button1_Click" />

      <telerik:RadGrid ID="rgTest" runat="server" AllowFilteringByColumn="True"
        AllowSorting="True" GridLines="None" Skin="WebBlue" AllowPaging="True"
        PageSize="30">
        <MasterTableView>
        <RowIndicatorColumn>
        <HeaderStyle Width="20px"></HeaderStyle>
        </RowIndicatorColumn>

        <ExpandCollapseColumn>
        <HeaderStyle Width="20px"></HeaderStyle>
        </ExpandCollapseColumn>
        </MasterTableView>

        <FilterMenu EnableTheming="True" Skin="WebBlue">
        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
        </FilterMenu>
      </telerik:RadGrid>

C#

protected void Button1_Click(object sender, EventArgs e)
    {
      string conn = ConfigurationManager.AppSettings["ShareConnectionString"]; //Connection to SAS DB
      System.Data.DataSet sasDs = new System.Data.DataSet();
      OleDbConnection sas = new OleDbConnection(conn);
      sas.Open();


      OleDbCommand sassasCommand = sas.CreateCommand();
      sasCommand.CommandType = CommandType.Text;
      sasCommand.CommandText = "Select * from Test.Temp;";
      OleDbDataAdapter da = new OleDbDataAdapter(sasCommand);
      da.Fill(sasDs);
      sas.Close();
      DataTable dt = new DataTable();
      dt = sasDs.Tables[0];

      rgTest.DataSource = dt;
      rgTest.DataBind();
    }

What am I missing?  Should I have all the skins in my project?  Where do I find them?

Thank You
Jerry

[Daniel]

Hello Jerry,

I suggest you examine our help resources:

Demos:
LoadingPanel Transparency demo
Automatic operations demo

Documentation:
AJAX Loading Panel

Furthermore I suggest the following modification your RadAjaxManager settings.

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

Let us know if you need more information.

Best regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[jerry]

Daniel,
Did look at those.  I based what I did off of the demos and the documentation.

I'm not sure what i'm missing.

Thank you for helping me.

Jerry