title: How to show devexpress popup control inside a user control from client side
body: <p>I am using devExpress 11.2 and ASP.NET 4.0. Please bear with me for lengthy problem description.</p>
  
  <p>I have created a user control which contains a ASPxPopupControl (ID = "myPopup")</p>
  
  <pre><code>        &lt;dx:ASPxPopupControl ID="myPopup" runat="server" ... &lt;/dx:ASPxPopupControl&gt;
  </code></pre>
  
  <p>and other controls. I also implemented a public method ShowPopup() in which it executes the myPopup.ShowOnPageLoad = true in order to show this popup. This user control is then registered and referenced in my ASPX page. I put this user control into a cell of a table within ASPxRoundPanel with ID="myUC"</p>
  
  <p>In this page, I have a ASPxGridView in which I created a custom command button as follows:</p>
  
  <pre><code>&lt;dx:GridViewCommandColumn  VisibleIndex="0" Width="30px" Caption="" ButtonType="Image"&gt;
      &lt;CustomButtons&gt;
         &lt;dx:GridViewCommandColumnCustomButton ID="cmd"&gt;
             &lt;Image Url="~/Images/OK.png" /&gt;
         &lt;/dx:GridViewCommandColumnCustomButton&gt;
      &lt;/CustomButtons&gt;
  &lt;/dx:GridViewCommandColumn&gt;
  </code></pre>
  
  <p>ClientSideEvents is defined as </p>
  
  <pre><code>&lt;ClientSideEvents BeginCallback="OnDevExpressBeginCallback" EndCallback="OnDevExpressEndCallback"&gt;
  </code></pre>
  
  <p>I would like to popup my user control when this image button is clicked. Please note that this ASPxGridView also provide Insert/Editing/Delete function.</p>
  
  <p>There are two ways to deal with this requirement.</p>
  
  <p>1  In order to ensure ASPxGridView handling its built-in commands (Insert and etc) correctly, I need to set <code>EnableCallBacks="True"</code> then I set  <code>OnCustomButtonCallback="OnmyASPxGridView_CustomButtonCallback"</code> to handle the clicking event of the image button from code behind. I called myUC.ShowPopup() from code behind and I debugged up to here. However, the popup is not shown. If I set <code>EnableCallBacks="False"</code> then the popup is shown exactly what I expected. </p>
  
  <p>The problem of this approach is not acceptable because the built-in commands do not work properly. So the question is how can I show the popup control within my user control from code behind while <code>EnableCallBacks="True"</code> ?</p>
  
  <p>2 Second approach is to show popup from client side.
  I set <code>EnableCallBacks="True"</code> first to ensure my built-in commands work properly. then I defined ClientSideEvents as</p>
  
  <pre><code>&lt;ClientSideEvents BeginCallback="OnDevExpressBeginCallback" EndCallback="OnDevExpressEndCallback" CustomButtonClick="jsfnShowPopUpControl"/&gt;
  </code></pre>
  
  <p>and removed OnCustomButtonCallback event.</p>
  
  <p>I implemented javascript function jsfnShowPopUpControl like this:</p>
  
  <pre><code>function jsfnShowPopUpControl(s, e) {
      // next, find access control inside user control
      **var myPopupName = document.getElementById('&lt;%=myUC.FindControl("myPopup").ClientID %&gt;');**
  
      if (myPopupName != null) {
          myPopupName.Show();
          myPopupName.PerformCallback(e);
      }
      else {
          alert("Data error encountered"); // cannot find popup
          return; //  
      }}
  </code></pre>
  
  <p>The key part of this approach is to find the devexpress popup control which resides within a user control. Unfortunately that getElementById function could not find the underneath control in my user control and thus popup is not shown either. </p>
  
  <p>Please help and let me know what I did wrong in my two different approaches.</p>
  
  <p>Thanks a lot.</p>