How to resize RadWindow after RadAsyncUpload?

2 posts, 0 answers
  1. Chris
    Chris avatar
    19 posts
    Member since:
    Apr 2009

    Posted 09 Mar 2018 Link to this post

    I'm having a hard time resizing a RadWindow after I have uploaded an image via RadAsyncUpload. Can someone provide some guidance? I'm not sure where to start and everything I've seen on here hasn't worked. Thanks.

    <telerik:RadWindow runat="server" ID="rwPhoto" Skin="Bootstrap" KeepInScreenBounds="true" VisibleOnPageLoad="false" Modal="true"
                Behaviors="CLose,Move" AutoSize="true" OnClientAutoSizeEnd="centerWindow">
                <ContentTemplate>
                    <asp:Panel ID="panPhoto" runat="server" CssClass="main-report" Width="700px">
                        <div class="container-fluid">
                            <br class="clearfix" />                    
                            <div class="row">
                                <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4 label-text">Image Location:</div>
                                <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">                       
                                    <telerik:RadAsyncUpload id="btnSelect" runat="server"  AllowedFileExtensions=".png,.jpg,.jpeg" Skin="Bootstrap" ControlObjectsVisibility="None"
                                        MaxFileInputsCount="1" TemporaryFolder="~/Temp" OnClientFileSelected="OnClientFileSelected" />                     
                                </div>
                            </div>           
                            <div id="images" class="row">
                                <div id="thumb" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center"></div>
                                <div id="pic" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 text-center">                     
                                    <asp:Image ID="picPhoto" runat="server" CssClass="img-responsive" />                      
                                </div>                         
                            </div>                                               
                            <div class="row">
                                <div class="col-md-12">
                                    <div class="pull-left">                                  
                                        <asp:Button ID="btnCancel" runat="server" Text="Close" CssClass="btn btn-primary" />                                  
                                    </div>                                                                                            
                                    <div class="pull-right">                                  
                                        <asp:Button ID="btnSave" runat="server" Text="Save" CssClass="btn btn-main" />                                  
                                    </div>
                                </div>
                            </div>         
                        </div>
                    </asp:Panel>
                </ContentTemplate>
            </telerik:RadWindow>

     

    function centerWindow(sender, args) {
                sender.center();
            }
            function OnClientFileSelected(sender, args) {
                var file = args.get_fileInputField().files.item(args.get_rowIndex()),
                    index = 0;
                while (!file) {
                    file = args.get_fileInputField().files.item(index);
                    index++;
                }
                var pic = document.getElementById("pic");
                pic.style.display = "none";
                showImage(file);
            }
            function showImage(file) {
                var image = document.createElement("img"),
                    thumb = document.getElementById("thumb");
                image.className = "img-responsive";
                image.file = file;
                thumb.appendChild(image);
     
                var reader = new FileReader()
                reader.onload = (function (aImg) {
                    return function (e) {
                        aImg.src = e.target.result;
                    };
                }(image))
                var ret = reader.readAsDataURL(file),
                    canvas = document.createElement("canvas");
            }
  2. Marin Bratanov
    Admin
    Marin Bratanov avatar
    4627 posts

    Posted 11 Mar 2018 Link to this post

    Hello,

    The onload event of the image should be fired after it is renderd, so it would be a great place to call the .autoSize(bShouldAnimate) method of the RadWindow (see the full API here). If this does not help, try adding a timeout. You can see how to reference the RadWindow here.


    Regards,
    Marin Bratanov
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top