Responsive design using radasyncupload.

[Vishnu]

Hi

Is there any way I can make the RadAsyncUpload control responsive?

Thanks
Vishnu.

[Magdalena]

Hello Vishnu,

Please, find a sample solution where the RadAsyncUpload is responsive. It expand to its parent after page load or uploading files. The effect is achieved by additional Java Script that calculates and overwrites the width of the input.

Regards,
Magdalena
Telerik

 

 

[Vishnu]

Hi Magdalena,

Thanks for the sample code.

But now there is some issue with the look and feel of the Select Button. After a file has been uploaded from client, the right end of the Select button seems cut out as shown in the attached file. Any solution for this?

[Magdalena]

Hi Vishnu,

Thank you for getting back to us.

Please, find the fixed solution in the attachment.

Do not hesitate to contact us if you have other questions.

Regards,
Magdalena
Telerik

 

 

[Vishnu]

Hi Magdalena,

I am developing a responsive web application. If I resize the browser to a small viewport size & when the page is loading the asyncupload is properly rendered. Once a file is client uploaded and when the user clicks the "Remove" button, then the issue again arises. Please check the attached screenshot.

<div class="content">
    <div style="margin: 10% 0% 5% 5%;">
        <telerik:RadAsyncUpload ID="RadAsyncUpload1" runat="server" MaxFileInputsCount="1"
            Skin="Silk" OnClientFileUploading="setAsyncUploadSize">
        </telerik:RadAsyncUpload>
        <asp:Button ID="btnSaveFile" runat="server" Text="Upload" />
    </div>
</div>

thanks,
Vishnu.

[Magdalena]

Hi Vishnu,

We have modified the solution to resolve the issue with deleting files from AsyncUpload list. Please, find the modified version in the attachment. We are also sending you this video as a part of a local testing.

Regards,
Magdalena
Telerik

 

 

[Vishnu]

Thanks for the working solution.

[Vishnu]

Hi Magdalena,

In another page, I have the RadAsyncUpload inside a RadWindow and in order to make the RadAsyncUpload responsive I used the same code you posted in the above reply.

But that didn't help me and the control is looking weird now. Please check the attached screenshot and help me with a solution.

Thanks,
Vishnu.

[Magdalena]

Hi Vishnu,

The reason of the issue is that the function of the width runs before the window is active so the size of the ruFileWrap is zero. To resolve the issue, you can call the function by the OnClientActivate event. Please, find the sample solution in the attachment.

Regards,
Magdalena
Telerik

 

 

[Vishnu]

Thanks Magdalena!