Custom Widget and resizeToContent

In my custom widget I use resizeToContent function to resize base dialog (window). When a new windows is bigger than initial it re-sizes height or width or both - depends what dimension is bigger. Please find example picture that shows just opened page selector dialog. Base window height was re-sized to fit page selector dialog but width remains with original size.
On the second window you will see that new dialog is smaller than base window by both dimensions. In this case base window size doesn't change at all. Does it think that new dialog is visible and that is enough? But again it doesn't look good.

How can I make base window to be re-sized by both dimensions appropriately.

Example how I call re-size method:

// add resize events

resizeEvents: function ()

    // resize on Page Select

    var s = this.get_PageSelector();

    s.add_selectorOpened(this._resizeControlDesigner);

    s.add_selectorClosed(this._resizeControlDesigner);

 

    // resize control designer on image selector load

    var i = this.get_ImageSelector();

    this._resizeControlDesignerDelegate = Function.createDelegate(this, this._resizeControlDesigner);

    $addHandler(i._replaceImageButtonElement, "click", this._resizeControlDesignerDelegate);

 

    // resize control designer on image selector mode toggle

    var d = i._asyncImageSelector._dialogModesSwitcher;

    d.add_valueChanged(this._resizeControlDesigner);

 

    // resize control designer on image selector cancel

    var a = i._asyncImageSelector._cancelLink;

    $addHandler(a, "click", this._resizeControlDesignerDelegate);

 

    // resize control designer on image selector save

    var s = i._asyncImageSelector._saveLink;

    $addHandler(s, "click", this._resizeControlDesignerDelegate);

 

    // resize control designer on image upload

    i._asyncImageSelector.get_uploaderView().add_onFileUploaded(this._resizeControlDesigner);

,

// function to initialize resizer methods and handlers

_resizeControlDesigner: function ()

    setTimeout("dialogBase.resizeToContent()", 1000);

Hi Denis,

I'm not sure I follow your question. Does your dialog inherit from AjaxDialogBase - I mean do you use a RadWindow or jQuery UI Dialog? The resizeToContent function is meant to be used only for RadWindows. It uses the RadWindow get_contentFrame() method then applies some logic if the window has title, etc. You could check the source of this method in AjaxDialogBase.js, which is a resource in Telerik.Sitefinity.

Hi Lubomir,

I created standard Sitefinity widget. And use standard widget administration (Control Designer, single view). Per the following article: "By default, Sitefinity an internal service to automatically create a default control designer, listing all public properties of the widget as simple textboxes."

So, I don't do anything special about this administration window and I don't know if it uses RadWindow or jQuery. This is automatically generated by Sitefinity from template (ascx file). From control designer window I open other standard sitefinity windows such as: select page or select image. And if new window is smaller by width or height I still can see parent dialog. This is good. If new window is bigger then original dialog, it sizes appropriately. Pretty much the same that I tried to say in the original post. See the following screenshots for more clarification:
- original control designer window: original.PNG
- second window is opened (clicked on "change image", this is standard sitefinity dialog coming from sitefinity:ImageField in the template) second_window_is_opened.PNG. You can see, that width was increased but height didn't. I still can see the original dialog.
- original window after I click "cancel". Everything back to normal.

I calldialogBase.resizeToContent() function as it is described in the tutorials but it doesn't help (see my original post). Just in case provide my template:

Please let me know how I can fix this.

Thanks
Denis.

Hi Denis,

 Actually this is a known issue with the resizeToContent function. The problem is that when you have other child windows inside, the function doesn't resize properly, as it only refers to the child items that are inside this particular RadWindow (and you are working with another window inside the parent RadWindow). What I can suggest here is hardcoding the size of the designer, by using the dialogBase.setWndHeight function and setting the Height of the window manually on opening of the selector.

Thank you for the reply.
I was able to setup height automatically.
But the window is still scrollable (see the image). It doesn't really hide base form content.
Is there some nice way to hide overflow?

Or instead of resizing base dialog can child radwindow be centered by width and height? In this case it would be clear that this is child window on top of base window. Same with shared content selector window in the content editor window.

Thanks!
Denis.

Hello Denis,

 You should have all of the window properties in the dialog client object, so you can use it to remove the overflow (you can even do it by modifying the window's styling). 
On the centering question - I think this is only possible by manually positioning the window. 

I don't mean to bring up an old thread but I had trouble figuring how to use dialogBase.setWndHeight() and what it actually did.   (I read it as set Width and Height) So when I do a search for this again and if anyone else does a search on it they can get some more information on it.

dialogBase.setWndHeight("XXXpx");
dialogBase.setWndWidth("XXXpx");

I put the above in my initialize and my refreshui methods and was able to get the size exactly the way I needed it.

Hello Denis,

By default resizeToContent resizing the dialog according the particular content. When dialogBase.setWndHeight / dialogBase.setWndWidth are used the dialog will be not be resized dynamically, but will have exact width and height.

Regards,
Kaloyan
Telerik