Adding OnClientFileUploaded hides the control?

[plusHR]

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

[Princy]

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.

[plusHR]

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" />
        -->

[Princy]

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.

[plusHR]

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.

[plusHR]

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>

[plusHR]

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?