Rad window used in user control. Not working properly when using multiple instances of same user control

[Kailash]

Hi,

I am using two instances of same user control, but this user control does not work properly.
when i am using single instance of this user control it works properly.
In this user control, i have used rad window and RadAjaxManagerProxy control.
In single instance scenario, rad window works properly means it was close properly on cancel button and
shows ajaxloadingpanel on OK button during processing, but when i am using the same user control with multiple instances then rad window does not work properly.
I have added source code of this user control and aspx page.
Please suggest me the solution.



thanks



This is source of "Picker.ascx" user control

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Picker.ascx.cs" Inherits="Picker" %>

<%@ Register Assembly="Telerik.Web.UI, Version=2010.1.519.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

<telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">

 

    <AjaxSettings >

        <telerik:AjaxSetting AjaxControlID ="gvPeoplePicker">

            <UpdatedControls >

                <telerik:AjaxUpdatedControl ControlID ="gvPeoplePicker" LoadingPanelID ="AjaxLoadingPnl" />

            </UpdatedControls>

        </telerik:AjaxSetting>

         

        <telerik:AjaxSetting  AjaxControlID ="btnOK">

            <UpdatedControls >

                <telerik:AjaxUpdatedControl ControlID ="gvPeoplePicker" LoadingPanelID ="AjaxLoadingPnl" />

            </UpdatedControls>

        </telerik:AjaxSetting>

         

        <telerik:AjaxSetting  AjaxControlID ="btnOK">

            <UpdatedControls >

                <telerik:AjaxUpdatedControl ControlID ="txtBoxPicker" />

            </UpdatedControls>

        </telerik:AjaxSetting>

         

    </AjaxSettings>

     

</telerik:RadAjaxManagerProxy>

 

 

<div nowrap>

    <table>

        <tr>

            <td>

                <telerik:RadTextBox ID="txtBoxPicker" runat="server">

                </telerik:RadTextBox>

            </td>

            <td>

                <asp:Button ID="btnOpenPicker" runat="server" Text="..."  OnClientClick="return false;" />

            </td>

        </tr>

    </table>

</div>

 

 

<telerik:RadAjaxLoadingPanel ID="AjaxLoadingPnl" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

 

<telerik:RadWindow ID="WndPicker" runat="server" OpenerElementID ="<%# btnOpenPicker.ClientID %>"

    Height="520" Width ="858" Behaviors ="Close,Move" Modal ="true" VisibleStatusbar ="false" 

    ReloadOnShow ="true"  ShowContentDuringLoad="false" DestroyOnClose ="true">

   <ContentTemplate >

       <table width="100%">

           <tr>

               <td nowrap style="border-bottom: solid 1px lightgray; height: 40px; vertical-align: middle">

                   <table>

                       <tr>

                           <td valign="middle" style="vertical-align: middle">

                               <asp:Image ID="imagePeople" runat="server" ImageUrl="~/Images/1278314238_people.png"

                                   Height="30px" Width="30px" />

                           </td>

                           <td valign="middle" style="vertical-align: middle">

                                <asp:Label ID="lblMsg" runat="server" Text="Search for people from the database."

                                   Font-Names="Arial" Font-Size="8.5pt" ForeColor="Gray"></asp:Label>

                           </td>

                       </tr>

                   </table>

               </td>

           </tr>

       </table>

        

       <table width="100%">

           <tr>

               <td nowrap>

                   <telerik:RadGrid ID="gvPeoplePicker" runat="server" ShowHeader="true" EnableLinqExpressions="false"

                       AutoGenerateColumns="false" GridLines="Horizontal" AllowFilteringByColumn="true"

                       Width="100%" AllowPaging ="false" >

                       <MasterTableView ShowHeadersWhenNoRecords="true">

                           <Columns>

                               <telerik:GridBoundColumn HeaderText="Employee ID" UniqueName="EmployeeID" DataType="System.Int32">

                               </telerik:GridBoundColumn>

                                

                               <telerik:GridBoundColumn HeaderText="Department">

                               </telerik:GridBoundColumn>

                                

                               <telerik:GridBoundColumn HeaderText="Branch" DataType="System.String">

                               </telerik:GridBoundColumn>

                                            

                               <telerik:GridBoundColumn HeaderText="Nationality" DataField="Nationality" DataType="System.String">

                               </telerik:GridBoundColumn>

                                

                               <telerik:GridBoundColumn HeaderText="Gender" DataField="Gender" DataType="System.String">

                               </telerik:GridBoundColumn>

                           </Columns>

                       </MasterTableView>

                       <ClientSettings>

                           <Scrolling AllowScroll="true" ScrollHeight="300px" UseStaticHeaders="true" />

                           <Resizing AllowColumnResize="true" />

                       </ClientSettings>

                   </telerik:RadGrid>

               </td>

           </tr>

           <tr>

               <td>

                     

               </td>

           </tr>

           <tr>

               <td align="right">

                   <asp:Button ID="btnOK" runat="server" Text="OK" Width="70px" OnClick="btnOK_Click" />

                     

                   <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="CloseWnd();return false;" />

                    

               </td>

           </tr>

           <tr>

               <td>

                        

               </td>

           </tr>

       </table>

   </ContentTemplate>

</telerik:RadWindow>

 

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

 

<script language ="javascript" type ="text/javascript"  >

     

    function CloseWnd() {

        $find("<%=WndPicker.ClientID%>").close();

        return false;

    }

 

</script>

</telerik:RadCodeBlock>


This is code behind code of "Picker.ascx.cs"

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data ;
using System.Data.SqlClient  ;
using Telerik.Web .UI ;

public partial class Picker : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
        gvPeoplePicker.DataSource = string.Empty;
    }

    protected void btnOK_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2000);
        txtBoxPicker.Text = "Result.";

        ScriptManager.RegisterClientScriptBlock(Page, Page.GetType(), "", "CloseWnd();", true);
    }
}


Source of "Default.aspx" file. This aspx page contain single instance of user control.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="Telerik.Web.UI, Version=2010.1.519.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
    Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    
<%@ Register src="Picker.ascx" tagname="Picker" tagprefix="uc1" %>
    
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    
    <div>
    Single Instance
    <uc1:Picker ID="Picker1" runat="server" />
    
     </div>
     
     <br />
     <br />
     
    <asp:Button ID="Button1" runat="server" Text="Page 2" onclick="Button1_Click" />
    </form>
</body>
</html>

Code behind code of "Default.aspx.cs" file.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {
        Response.Redirect("Default2.aspx");  
    }
}


code of "Default2.aspx" file. This page contain multiple instance of same user control.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>
<%@ Register Assembly="Telerik.Web.UI, Version=2010.1.519.35, Culture=neutral, PublicKeyToken=121fae78165ba3d4"
    Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register src="Picker.ascx" tagname="Picker" tagprefix="uc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
    </telerik:RadAjaxManager>
    
    <div nowrap>
    User Control (1st Instance) <uc1:Picker ID="Picker1" runat="server" />
    </div>
    
    <br />
    
    <div nowrap>
        User Control (2nd Instance) <uc1:Picker ID="Picker2" runat="server" />
    </div>
    </form>
</body>
</html>








[Fiko]

Hi Kailash,

This is a common behavior in such scenarios and it is not related to RadControls. In your case I recommend you to use this approach in order to avoid the issue:

• Rework the Close method as shown bellow:
  

  function CloseWnd(windowClientId)
  {
       $find(windowClientId).close();
       return false;
  }

• Remove the highlighted code from the button's declaration:
  

  <asp:Button ID="btnCancel" runat="server" Text="Cancel" OnClientClick="CloseWnd();return false;" />

• Set the OnClientClick event in the UserControl's codebehind file:
  

  protected void Page_Load(object sender, EventArgs e)
  {
          btnCancel.OnClientClick = string.Format("CloseWnd('{0}');return false;", WndPicker.ClientID);
  }

In addition I recommend you to use this approach in order to set the OpenerElementID property of the control:

protected void Page_Load(object sender, EventArgs e)

{

    btnCancel.OnClientClick = string.Format("CloseWnd('{0}');return false;", WndPicker.ClientID);



    WndPicker.OpenerElementID = btnOpenPicker.ClientID;

}

I recommend you this because starting from 2010.2 713 version of the Telerik.Web.UI toolkit this expressions:

OpenerElementID ="<%# btnOpenPicker.ClientID %>"

will no longer work when the RadWindow's ContentTemplate inner property is used. This is described in the Telerik RadWindow for ASP.NET AJAX Q2 2010 section on this page.

I hope this helps.

All the best,
Fiko
the Telerik team