Hi!

I'm developing a photo gallery and I have a medium-sized photo thumbnail on a page. ASPxPopupControl is attached to this image, so when a user clicks on it the popup shows up. Now, this popup shows an original photo and has Prev and Next buttons. The buttons invokes ASPxCallback.SendCallback and the callback is completed this client-side code is executed:

function callbackComplete(e)
{
   if (e.result != null)
   {
      var args = e.result.split("|");
      photoImgInPopup.SetImageUrl(args[0]);
      photoImgInPopup.SetSize(args[2], args[3]);
      dxPopup.SetSize(args[2], args[3]);
      dxPopup.Show();
      if (args[1] != -1)
         currPhotoId = args[1];
   }
}

Everything works (as you may see here: http://interlogus.ru/sp/Photo.aspx?id=80; Prev and Next buttons are in the popup's footer) but the original images are not the same in size and the popup needs to be recentered after the image is shown. How do I do this?

Thanks.
Alex
 

OK, after couple of hours playing with it the problem comes down to this - when the popup is visible on the screen how can I change its size and position without hiding it and showing up again? That's the only possible way I found.

PS. That's all client-side.

Thanks,
Alex

Hi,

The following ASPX code will help you:

 

        <div id="div1" style="height: 300px;">
        </div>
            <dxpc:ASPxPopupControl ShowOnPageLoad="True" PopupElementID="div1" ID="ASPxPopupControl1" runat="server" ClientInstanceName="dxPopup" PopupHorizontalAlign="Center" PopupVerticalAlign="Middle" EnableAnimation="False">
                <ClientSideEvents Init="function(s, e) {
    ASPxCallback.SendCallback();
}" />
                        <Controls>
                            <dxe:ASPxImage ClientInstanceName="photoImgInPopup" ID="ASPxImage1" runat="server">
                            </dxe:ASPxImage>
                            <dxe:ASPxHyperLink ID="ASPxHyperLink1" runat="server" Text="Next">
                                <ClientSideEvents Click="function(s, e) {
    ASPxCallback.SendCallback();
}" />
                            </dxe:ASPxHyperLink>                           
                        </Controls>
            </dxpc:ASPxPopupControl>       
                <dxcb:ASPxCallback ID="ASPxCallback1" runat="server" ClientInstanceName="ASPxCallback" OnCallback="ASPxCallback1_Callback">
                    <ClientSideEvents CallbackComplete="function(s, e) {
    if (e.result != null) {
      var args = e.result.split(&quot;|&quot;);
      photoImgInPopup.SetImageUrl(args[0]);
      photoImgInPopup.SetSize(args[2], args[3]);
      dxPopup.SetSize(args[2], args[3]);     
      dxPopup.Hide();
      dxPopup.Show();
    }
}" />
            </dxcb:ASPxCallback>

CS

public partial class _Default : System.Web.UI.Page {
    private Random rnd = new Random(DateTime.Now.Millisecond);
    private int Rnd {
        get { return rnd.Next(100, 200); }
    }
    protected void Page_Load(object sender, EventArgs e) {

    }

    protected void ASPxCallback1_Callback(object source, DevExpress.Web.ASPxCallback.CallbackEventArgs e) {
        int height = Rnd;
        e.Result = "Images/ImageAlign.jpg||" + 2 * height + "|" + height + "";
    }
}

Thank you, Nick. But still, how can I resize and reposition popup without hiding it first?

Hi Alex,

The current ASPxPopupControl version does not allow you to resize and reposition a popup window without hiding it. I have registered a new suggestion in the support center:

www.devexpress.com/issue=S18584