+1-888-365-2779
Try Now
More in this section

Forums / Developing with Sitefinity / Custom Widget and resizeToContent

Custom Widget and resizeToContent

8 posts, 0 answered
  1. Denis
    Denis avatar
    105 posts
    Registered:
    27 Feb 2009
    23 Jan 2012
    Link to this post
    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);
    }
  2. Lubomir Velkov
    Lubomir Velkov avatar
    688 posts
    Registered:
    03 Nov 2014
    26 Jan 2012
    Link to this post
    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.

    All the best,
    Lubomir Velkov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. Denis
    Denis avatar
    105 posts
    Registered:
    27 Feb 2009
    27 Feb 2012
    Link to this post
    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:

    <%@ Control Language="C#" %>
    <%@ Register Assembly="Telerik.Sitefinity" Namespace="Telerik.Sitefinity.Web.UI.Fields" TagPrefix="sf" %>
    <sitefinity:FormManager ID="formManager" runat="server" />
     
    <!-- show the image preview as a thumbnail -->
    <style type="text/css">
        #Options li img
        {
            height: 50px !important;
            margin: 5px 5px 5px 0px;
        }
    </style>
     
    <div class="sfContentViews">
        <div id="Options">
            <div>
                <div id="groupSettingPageSelect">
                    <ul class="sfTargetList">
                        <li>
                            <label class="sfTxtLbl">
                                Select A Page:</label>
                            <sf:PageField ID="PageSelector" runat="server" WebServiceUrl="~/Sitefinity/Services/Pages/PagesService.svc/" DisplayMode="Write" />
                        </li>
                        <li>
                            <label class="sfTxtLbl">
                                Select An Image:</label>
                            <sitefinity:ImageField ID="ImageSelector" runat="server" ReplacePhotoButtonLabel="Change Image" DisplayMode="Write" UploadMode="Dialog" DataFieldName="Image" />
                        </li>
                        <li>
                            <label class="sfTxtLbl">
                                Text:</label>
                            <sitefinity:TextField ID="BlockText" runat="server" DisplayMode="Write" Rows="10" />
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    Please let me know how I can fix this.

    Thanks
    Denis.
  4. Svetoslav Petsov
    Svetoslav Petsov avatar
    456 posts
    Registered:
    24 Sep 2012
    29 Feb 2012
    Link to this post
    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.

    Greetings,
    Svetoslav Petsov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  5. Denis
    Denis avatar
    105 posts
    Registered:
    27 Feb 2009
    04 Mar 2012
    Link to this post
    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.
  6. Svetoslav Petsov
    Svetoslav Petsov avatar
    456 posts
    Registered:
    24 Sep 2012
    07 Mar 2012
    Link to this post
    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. 

    All the best,
    Svetoslav Petsov
    the Telerik team
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. Brett Whittington
    Brett Whittington avatar
    33 posts
    Registered:
    12 Jan 2012
    14 Oct 2013
    Link to this post
    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.
  8. Kaloyan
    Kaloyan avatar
    272 posts
    Registered:
    02 Dec 2016
    17 Oct 2013
    Link to this post
    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
    Do you want to have your say in the Sitefinity development roadmap? Do you want to know when a feature you requested is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
8 posts, 0 answered