Loading Panel on show when clicked on a linkbutton in the repeater nested in a RadGrid

7 posts, 1 answers
  1. jing
    jing avatar
    31 posts
    Member since:
    Aug 2007

    Posted 03 Sep 2010 Link to this post

    I had a LinkButton that is repeated inside the repeater. The repeater is nested inside the RadGrid.
    When clicked on the LinkButton, there is partial postback but loading panel is not shown.

    How do I change it have loading panel once the link button is clicked?

    <telerik:RadAjaxManager ID="AjaxManager" runat="server">
            <telerik:AjaxSetting AjaxControlID="Grid1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Grid1" LoadingPanelID="AjaxLoadingPanel" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
      
    <telerik:RadGrid ID="Grid1" runat="server" AutoGenerateColumns="False"
        <MasterTableView DataKeyNames="ID" ClientDataKeyNames="ID,Write" TableLayout="Fixed"
            <Columns
                .... 
                <telerik:GridTemplateColumn HeaderText="Sub Data" UniqueName="SubData"
                    <ItemTemplate
                        <asp:Repeater ID="Repeater1" runat="server" DataSource='<%# ((DataRowView)Container.DataItem).Row.GetChildRows("SubData") %>' OnItemCommand="Repeater1_ItemCommand"> 
                            <ItemTemplate
                                <asp:LinkButton ID="LinkButton1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "[\"Name\"]")%>' CommandName="RELOAD" /> 
                            </ItemTemplate
                        </asp:Repeater
                    </ItemTemplate
                </telerik:GridTemplateColumn
            </Columns
        </MasterTableView
        <ClientSettings
        ... 
        </ClientSettings
    </telerik:RadGrid>

    protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
    {
        if (e.CommandName == "RELOAD")
        {
            ...
            // rebind the grid1
        }
    }


    Thanks in advance.

  2. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 06 Sep 2010 Link to this post

    Hi Jing,

    Please make sure that you have set the Skin property of the RadAjaxLoadingPanel.

    All the best,
    Pavlina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. jing
    jing avatar
    31 posts
    Member since:
    Aug 2007

    Posted 07 Sep 2010 Link to this post

    I have set the loading panel. It won't shown once linkbutton is clicked. Other than that it working fine.

    <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel" runat="server" Transparency="30"
        <div class="loading"
            <asp:Image ID="ImageLoading" runat="server" ImageUrl="loading.gif" /> 
        </div
    </telerik:RadAjaxLoadingPanel>
  4. Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 07 Sep 2010 Link to this post

    Hello Jing,

    I tried to replicate the issue which you described but to no avail. I followed closely your scenario and it worked as expected. Could you please check out the attached project and tell me what am I missing out.

    Regards,
    Pavlina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. jing
    jing avatar
    31 posts
    Member since:
    Aug 2007

    Posted 07 Sep 2010 Link to this post

    The problem lay on the tooltip. When the tooltip is loading, click on the link button, the loading panel will not shown. Is there a way to make the loading panel show?

    I have editing your code attached in the previous post.

    <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
      
    <%@ Import Namespace="System.Data" %>
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <style type="text/css">
        .loading
        {
            background-color: #fff;
            height: 100%;
            width: 100%;
            text-align: center;
        }
        .loading img
        {
            margin-top: 50px;
        }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
            </telerik:RadScriptManager>
            <telerik:RadAjaxManager ID="AjaxManager" runat="server">
                <AjaxSettings>
                                  <telerik:AjaxSetting AjaxControlID="FlowSheetGrid">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="TreeView1" LoadingPanelID="AjaxLoadingPanel" />
                            <telerik:AjaxUpdatedControl ControlID="FlowSheetGrid" LoadingPanelID="AjaxLoadingPanel" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
            <telerik:RadAjaxLoadingPanel ID="AjaxLoadingPanel" runat="server" Transparency="30">
                <div class="loading">
                    <asp:Image ID="ImageLoading" runat="server" ImageUrl="loading.gif" />
                </div>
            </telerik:RadAjaxLoadingPanel>
            <telerik:RadToolTipManager ID="ToolTipManager1" runat="server" Width="250px"
            Skin="Telerik" AnimationDuration="200" RelativeTo="Element" Animation="Slide"
            Position="BottomCenter" HideEvent="LeaveTargetAndToolTip" OnAjaxUpdate="ToolTipManager1_AjaxUpdate" />
                  <telerik:RadGrid ID="FlowSheetGrid" runat="server" Skin="Vista" AllowPaging="true" OnItemDataBound="FlowSheetGrid_ItemDataBound">
                <MasterTableView AutoGenerateColumns="false">
                    <Columns>
                        <telerik:GridBoundColumn DataField="Name" HeaderText="Name" UniqueName="Name">
                        </telerik:GridBoundColumn>
                        <telerik:GridTemplateColumn HeaderText="Sub Data" UniqueName="SubData">
                            <ItemTemplate>
                                <asp:Repeater ID="Repeater1" runat="server" DataSource='<%# ((DataRowView)Container.DataItem).Row.GetChildRows("TableToSubTable") %>'
                                    OnItemCommand="Repeater1_ItemCommand">
                                    <ItemTemplate>
                                        <asp:LinkButton ID="LinkButton1" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "[\"Name\"]")%>'
                                            CommandName="RELOAD" />
                                    </ItemTemplate>
                                </asp:Repeater>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </MasterTableView>
                <ClientSettings>
                    <Scrolling AllowScroll="True" UseStaticHeaders="true" SaveScrollPosition="true" FrozenColumnsCount="1" />
                </ClientSettings>
            </telerik:RadGrid>
        </form>
    </body>
    </html>

    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using Telerik.Web.UI;
    using System.Data;
    using System.Data.SqlClient;
    using System.Data.OleDb;
      
    public partial class _Default : System.Web.UI.Page
    {
        private void BindGrid(string addSomeText)
        {
            DataSet ds = new DataSet();
      
            DataTable table1 = new DataTable();
            table1.TableName = "Table1";
            table1.Columns.Add("ID");
            table1.Columns.Add("Name");
            ds.Tables.Add(table1);
      
            DataTable subTable = new DataTable();
            subTable.TableName = "SubTable";
            subTable.Columns.Add("ParentID");
            subTable.Columns.Add("Name");
            ds.Tables.Add(subTable);
      
            ds.Relations.Add("TableToSubTable", ds.Tables["Table1"].Columns["ID"], ds.Tables["SubTable"].Columns["ParentID"]);
      
            for (int i = 1; i <= 5; i++)
            {
                DataRow row = ds.Tables["Table1"].NewRow();
                row["ID"] = i;
                row["Name"] = "Name " + addSomeText + " " + i;
                ds.Tables["Table1"].Rows.Add(row);
      
                for (int x = 1; x <= 2; x++)
                {
                    DataRow childRow = ds.Tables["SubTable"].NewRow();
                    childRow["ParentID"] = i;
                    childRow["Name"] = "Name " + x;
                    ds.Tables["SubTable"].Rows.Add(childRow);
                }
            }
      
            FlowSheetGrid.DataSource = ds.Tables["Table1"];
            FlowSheetGrid.DataBind();
        }
      
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                BindGrid("");
            }
        }
      
        protected void Repeater1_ItemCommand(object source, RepeaterCommandEventArgs e)
        {
            BindGrid("(LinkButton Clicked)");
            System.Threading.Thread.Sleep(1000);
        }
      
        protected void ToolTipManager1_AjaxUpdate(object sender, ToolTipUpdateEventArgs e)
        {
            Label lbl = new Label();
            lbl.Text = e.TargetControlID + " mouseover";
            e.UpdatePanel.ContentTemplateContainer.Controls.Add(lbl);
      
            System.Threading.Thread.Sleep(1000);
        }
      
        protected void FlowSheetGrid_ItemDataBound(object sender, GridItemEventArgs e)
        {
            if (e.Item.ItemType == GridItemType.Item || e.Item.ItemType == GridItemType.AlternatingItem)
            {
                Repeater rpt = (Repeater)e.Item.FindControl("Repeater1");
      
                foreach (RepeaterItem item in rpt.Items)
                {
                    LinkButton link1 = (LinkButton)item.FindControl("LinkButton1");
                    ToolTipManager1.TargetControls.Add(link1.ClientID, link1.Text, true);
                }
            }
        }
      
    }

  6. Answer
    Pavlina
    Admin
    Pavlina avatar
    6187 posts

    Posted 09 Sep 2010 Link to this post

    Hello Jing,

    Please try the approach from the last post in the forum thread below, which elaborates on similar subject and let me know if it works for you.
    http://www.telerik.com/community/forums/aspnet-ajax/xmlhttppanel/rad-tool-tip-and-xmlhttppanel.aspx

    Best wishes,
    Pavlina
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. jing
    jing avatar
    31 posts
    Member since:
    Aug 2007

    Posted 20 Sep 2010 Link to this post

    It's works. Thanks!!
Back to Top