Adding OnClientFileUploaded hides the control?

7 posts, 0 answers
  1. plusHR
    plusHR avatar
    58 posts
    Member since:
    Aug 2012

    Posted 17 May 2012 Link to this post

    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
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 17 May 2012 Link to this post

    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.
  3. plusHR
    plusHR avatar
    58 posts
    Member since:
    Aug 2012

    Posted 17 May 2012 Link to this post

    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" />
            -->
  4. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 18 May 2012 Link to this post

    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.
  5. plusHR
    plusHR avatar
    58 posts
    Member since:
    Aug 2012

    Posted 18 May 2012 Link to this post

    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.
  6. plusHR
    plusHR avatar
    58 posts
    Member since:
    Aug 2012

    Posted 18 May 2012 Link to this post

    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>
  7. plusHR
    plusHR avatar
    58 posts
    Member since:
    Aug 2012

    Posted 18 May 2012 Link to this post

    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?
Back to Top