This is a migrated thread and some comments may be shown as answers.

Adding OnClientFileUploaded hides the control?

6 Answers 163 Views
AsyncUpload
This is a migrated thread and some comments may be shown as answers.
plusHR
Top achievements
Rank 1
plusHR asked on 17 May 2012, 08:58 AM
I have a usercontrol that has a radasync upload. When I set the OnClientFileUploaded event the control is hidden?

<telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" AllowedFileExtensions="png" Width="100%"
                      MaxFileSize="524288" OnFileUploaded="RadAsyncUpload1_FileUploaded" OnClientFileUploaded="fileUploaded"
                      />

If I remove the OnClientFileUploaded tag the control shows with no problem?

P

6 Answers, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 17 May 2012, 10:14 AM
Hi Paul,

Are you getting any specific Javascript error. Please make sure that you are attaching the javascript function.

Javascript:
<script type="text/javascript">
    function fileUploaded()
    {
        //your script
    }
</script>

Please provide the code for further help.


Thanks,
Princy.
0
plusHR
Top achievements
Rank 1
answered on 17 May 2012, 10:20 AM
Yes the function is added; code is below

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Subscriptions.ascx.cs"
    Inherits="Portal.App.UserControls.Subscriptions" %>
<%@ Register Src="SubScriptionsSummary.ascx" TagName="SubScriptionsSummary" TagPrefix="uc1" %>
<style>
    .descriptionOuter
    {
        background: none repeat scroll 0 0 white;
        border: 1px solid #C5C5C5;
        border-radius: 5px;
        -webkit-border-radius: 5px;
        padding: 5px;
        clear: both;
        height: auto;
        position: relative;
        top: 20px;
        margin: 10px 30px 20px 30px;
    }
    .BODY
    {
        background: url(../qsfBodyBack-Q12012.png) repeat-x scroll left top #F3F5F5;
        color: #001119;
        font-size: 75%;
        line-height: 1.2;
        height: 100%;
        font-family: "segoe ui" ,arial,sans-serif;
    }
    .RotatorImage
    {
        padding-left: 2px;
        padding-right: 2px;
        cursor: hand;
        cursor: pointer;
    }
    .txtPadding
    {
        display: inline-block;
        margin-bottom: 2px;
    }
   
</style>
 
<telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">
</telerik:RadAjaxManagerProxy>
 <script type="text/javascript">
     function fileUploaded(sender, args) {
         alert('here');
        }
</script>
 
<div class="BODY">
 
    <div class="descriptionOuter" style="height: 200px;">
        <telerik:RadRotator ID="thumbRotator" runat="server" RotatorType="ButtonsOver" Width="100%"
            ItemHeight="200" ItemWidth="330" FrameDuration="1" ScrollDirection="Left,Right"
            OnItemClick="GetSubscription">
            <ItemTemplate>
                <div class="itemTemplate">
                    <img src='<%#  HttpUtility.UrlDecode(String.Format("{0}/_N{1}_large.png", HttpUtility.UrlEncode(Eval("C_s_ImageUrl").ToString()), Eval("C_n_Id"))) %>'
                        width="320px" height="200px" class="RotatorImage" /><br />
                    <asp:Label ID="lblId" runat="server" Text='<%# Eval("C_n_Id")%>' />
                </div>
            </ItemTemplate>
            <ControlButtons LeftButtonID="img_left" RightButtonID="img_right" />
        </telerik:RadRotator>
    </div>
    
    <asp:FormView ID="frmDetail" runat="server" DataKeyNames="C_n_Id" OnItemUpdated="FormView_ItemUpdated"
        OnModeChanging="FormView_ModeChanging" Width="100%" OnItemCommand="FormView_ItemCommand"
       OnItemUpdating="FormView_ItemUpdating" DefaultMode="ReadOnly">
        <ItemTemplate>
            <div class="descriptionOuter" style="padding: 10px;">
                <uc1:SubScriptionsSummary ID="SubScriptionsSummary1" runat="server" />
                <asp:LinkButton ID="EditButton" Text="Edit" CommandName="Edit" runat="server" CausesValidation="false" />
            </div>
            <div style="padding: 5px;" />
        </ItemTemplate>
        <EditItemTemplate>
            <div class="descriptionOuter" style="padding: 10px;">
                <uc1:SubScriptionsSummary ID="SubScriptionsSummary1" runat="server" />
            </div>
            <div class="descriptionOuter" style="padding: 10px;">
             
                <asp:Label ID="lblEditLargeImage" runat="server" Text="Please use the image editor to update the main image for your subscription feed. Suggested image size should be 320px x 200px."
                    Font-Bold="true" CssClass="txtPadding" /><br />
                <asp:Label ID="Label2" runat="server" Text="The main subscription image is shown to your mobile users when they view the subscription information."
                    Font-Bold="false" CssClass="txtPadding" /><br />
                  
                <telerik:RadImageEditor ID="RadImageEditor1" runat="server" EnableTheming="true"
                    ImageUrl='<%#  HttpUtility.UrlDecode(String.Format("{0}/_N{1}_large.png", HttpUtility.UrlEncode(Eval("C_s_ImageUrl").ToString()), Eval("C_n_Id"))) %>'
                    OnImageLoading="RadImageEditor1_ImageLoading" Width="100%" Height="280px">
                </telerik:RadImageEditor>
                 <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" AllowedFileExtensions="png" Width="100%"
                        MaxFileSize="524288" OnFileUploaded="RadAsyncUpload1_FileUploaded" OnClientFileUploaded="fileUploaded"
                        />
            </div>
            <div class="descriptionOuter" style="padding: 10px;">
                <asp:Label ID="Label1" runat="server" Text="Please use the image editor to update the notification image for your subscription feed. Suggested image size should be 64px x 64px."
                    Font-Bold="true" CssClass="txtPadding" /><br />
                <asp:Label ID="Label3" runat="server" Text="The notification image is shown next to each notification text on your mobile devices."
                    Font-Bold="false" CssClass="txtPadding" /><br />
                  
                <telerik:RadImageEditor ID="RadImageEditor2" runat="server" EnableTheming="true"
                    ImageUrl='<%#  HttpUtility.UrlDecode(String.Format("{0}/_N{1}_small.png", HttpUtility.UrlEncode(Eval("C_s_ImageUrl").ToString()), Eval("C_n_Id"))) %>'
                    OnImageLoading="RadImageEditor1_ImageLoading" Width="100%" Height="180px">
                </telerik:RadImageEditor>
                <br />
            </div>
            <div class="descriptionOuter" style="padding: 10px;">
                <asp:Label ID="Label4" runat="server" Text="Please enter the name to be used for your subscription feed."
                    Font-Bold="true" CssClass="txtPadding" EnableTheming="true" /><br />
                <asp:TextBox ID="C_s_Name" runat="server" Text='<%# Bind("C_s_Name") %>' Font-Size="11px"
                    Width="100%" EnableTheming="true" />
            </div>
            <div class="descriptionOuter" style="padding: 10px;">
                <asp:Label ID="Label5" runat="server" Text="Please enter the description for your subscription feed."
                    Font-Bold="true" CssClass="txtPadding" EnableTheming="true" /><br />
                <asp:TextBox ID="C_s_Description" runat="server" Text='<%# Bind("C_s_Description") %>' Font-Size="11px"
                    TextMode="MultiLine" Height="100px" Width="100%" EnableTheming="true" />
                <asp:LinkButton ID="lbSave" CommandName="Update" runat="server">Save</asp:LinkButton>
                <asp:LinkButton ID="lbCancel" CommandName="Cancel" runat="server">Cancel</asp:LinkButton>
            </div>
            <div style="padding: 5px;" />
        </EditItemTemplate>
        <InsertItemTemplate>
            <asp:Label runat="server" ID="lblTest" Text="Insert" />
        </InsertItemTemplate>
    </asp:FormView>
 
    <!--  <telerik:RadNotification ID="eventNotification" runat="server" VisibleOnPageLoad="false"
        Width="280" Height="100" Animation="Fade" ShowTitleMenu="true" EnableRoundedCorners="true" Title="Information" TitleIcon="none"
        Text="" LoadContentOn="EveryShow" ShowInterval="1000"       
        OffsetY="-20" OffsetX="-20" VisibleTitlebar="True" />
        -->
0
Princy
Top achievements
Rank 2
answered on 18 May 2012, 06:29 AM
Hi Paul,

Unfortunately I couldn't replicate the exact problem you are facing. For me the controls inside the FormView are not visible since the DefaultMode is set to ReadOnly.Are you able to access other controls rather than RadAsyncUpload? When I change the DefaultMode to Insert and put the RadAsyncUpload inside the InserItemTemplate, I was able to see the control on attaching the Javascript function.

Hope this helps.

Thanks,
Princy.
0
plusHR
Top achievements
Rank 1
answered on 18 May 2012, 08:05 AM
Yes I am able to see the other controls. I have attached a screen shot which shows the select box under the image, the form is in edit mode. However as soon as I attached the JavaScript command the box is not shown? Then if you look at the second screen shot the select box is not visible.
0
plusHR
Top achievements
Rank 1
answered on 18 May 2012, 09:45 AM
It appears that when I add any javascript function including the validate it does not render the control correctly.

<div id="ctl08_frmDetail_RadAsyncUpload1" class="RadAsyncUpload RadUpload RadUpload_Metro" style="width:100%;">
                <input id="ctl08_frmDetail_RadAsyncUpload1_ClientState" name="ctl08_frmDetail_RadAsyncUpload1_ClientState" type="hidden">
            </div>

Thats all it renders when attaching an event.

Hence if no javascript is attached in the web control it renders correctly.

<div id="ctl08_frmDetail_RadAsyncUpload1" class="RadAsyncUpload RadUpload RadUpload_Metro" style="width:100%;">
                <input id="ctl08_frmDetail_RadAsyncUpload1_ClientState" name="ctl08_frmDetail_RadAsyncUpload1_ClientState" type="hidden" autocomplete="off">
            <ul class="ruInputs" id="ctl08_frmDetail_RadAsyncUpload1ListContainer" style=""><li id="ctl08_frmDetail_RadAsyncUpload1row0"><span class="ruFileWrap ruStyled"><input type="text" tabindex="-1" class="ruFakeInput" id="ctl08_frmDetail_RadAsyncUpload1fakeInput0" size="22"><label for="ctl08_frmDetail_RadAsyncUpload1fakeInput0" style="display:none">label</label><input type="button" tabindex="-1" value="Select" class="ruButton ruBrowse"><input type="file" tabindex="-1" class="ruFileInput" name="ctl08_frmDetail_RadAsyncUpload1file0" id="ctl08_frmDetail_RadAsyncUpload1file0" size="23"><label for="ctl08_frmDetail_RadAsyncUpload1file0" style="display:none">label</label></span><div class="ruDropZone"></div></li></ul></div>
0
plusHR
Top achievements
Rank 1
answered on 18 May 2012, 09:52 AM
Ok so I have found the problem. I have to put the script in the page loading the user control and then it renders correctly. Surely i should be able to place the scripts in the actual web control?
Tags
AsyncUpload
Asked by
plusHR
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
plusHR
Top achievements
Rank 1
Share this question
or