Problems with OnClientFileUploaded

5 posts, 0 answers
  1. Tim
    Tim avatar
    60 posts
    Member since:
    May 2011

    Posted 04 Oct 2011 Link to this post

    I have a MasterPage, ContentPage Setup. The contentpage contains a RadTabStrip On one of the tabs I have created a usercontrol that contains a FileUpload control and some other controls. I and am using OnClientValidationFailed ="validationFailed" successfully however OnClientFileUploaded="fileUploaded" fails. The failure is when the control is trying to render it says that the jquery method that I assigned to the property could not be found. The method is there and will work if I put the method in the masterpage. I even tried to rebind on callbacks with no success.

    UserControl Code
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="FileUpload.ascx.cs"
        Inherits="MAAS.WebApplication.Controls.FileUpload" %>
    <style type="text/css">
        .upload-panel
        {
            width: 300px;
        }
        .info-panel
        {
            display: none;
            margin-top: 15px;
        }
    </style>
     
    <script type="text/javascript">
        //<![CDATA[
        function validationFailed(sender, eventArgs) {
            $(".ErrorHolder").append("<p>Validation failed for '" + eventArgs.get_fileName() + "'.</p>").fadeIn("slow");
            sender.deleteFileInputAt(0);
        }
     
        function fileUploadRemoved(sender, args) {
            $(".ErrorHolder").append("<p>removed file '" + eventArgs.get_fileName() + "'.</p>").fadeIn("slow");
            sender.deleteFileInputAt(0);
        }
         
        function fileUploaded(sender, args) {
            $telerik.$(".ErrorHolder").html("");
            setTimeout(function() {
                sender.deleteFileInputAt(0);
            }, 10);
        }
     
        //Re-bind for callbacks
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        prm.add_endRequest(function() {
            fileUploaded(sender, args);
        });
     
        //]]>
    </script>
     
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy_BatchImport" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="BtnSubmit">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ImportedPolicyRadGrid" LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <%--        <telerik:AjaxSetting AjaxControlID="ImportedPolicyRadGrid">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ImportedPolicyRadGrid"  LoadingPanelID="RadAjaxLoadingPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>--%>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <br />
    <br />
    <br />
    <p>
        Select files to upload (xls, xlsx)
    </p>
    <div class="upload-panel">
        <telerik:RadProgressManager runat="server" ID="RadProgressManager1" />
        <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" MultipleFileSelection="Disabled"
            OnClientValidationFailed="validationFailed"
            OnClientFileUploaded="fileUploaded"
            AllowedFileExtensions="xls, xlsx" AutoAddFileInputs="True">
            <FileFilters>
                <telerik:FileFilter Description="*.xls; *. xlsx" Extensions="xls, xlsx"></telerik:FileFilter>
            </FileFilters>
        </telerik:RadAsyncUpload>
        <telerik:RadProgressArea runat="server" ID="RadProgressArea1">
        </telerik:RadProgressArea>
    </div>
    <div class="ErrorHolder">
    </div>
    <asp:Button runat="server" ID="BtnSubmit" Text="Submit" OnClick="BtnSubmit_OnClick" />
     
    <asp:PlaceHolder ID="PlaceHolder1" runat="server" Visible="false">
        <telerik:RadGrid ID="ImportedPolicyRadGrid" runat="server" Width="97%" PageSize="15"
            AllowPaging="True" OnPageIndexChanged="ImportedPolicyRadGrid_PageIndexChanged"
            CellSpacing="0" GridLines="None" Skin="Web20">
            <MasterTableView Width="100%" Summary="RadGrid table">
            </MasterTableView>
            <PagerStyle Mode="NextPrevAndNumeric" />
            <ClientSettings>
                <Scrolling AllowScroll="True" UseStaticHeaders="True" />
            </ClientSettings>
        </telerik:RadGrid>
        <br />
        <asp:Button runat="server" ID="SaveBatch" Text="Save Batch" OnClick="SaveBatch_OnClick" />
    </asp:PlaceHolder>


    Content Page Code

    <%@ Page Title="" Language="C#" MasterPageFile="~/MAASDefault.Master" AutoEventWireup="true"
        CodeBehind="PolicyManagement.aspx.cs" Inherits="MAAS.WebApplication.PolicyManagement" %>
     
    <%@ MasterType VirtualPath="MAASDefault.master" %>
    <%@ Reference VirtualPath="MAASDefault.master" %>
    <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    </asp:Content>
    <asp:Content ID="Content2" runat="server" ContentPlaceHolderID="MainContentTitle">
        Policy Adjustments Management</asp:Content>
    <asp:Content ID="Content3" runat="server" ContentPlaceHolderID="MainContent">
        <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManagerProxy>
        <telerik:RadTabStrip runat="server" ID="RadTabStrip1" Orientation="HorizontalTop"
            OnClientTabSelecting="onTabSelecting" MultiPageID="RadMultiPage1" CssClass=""
            OnTabClick="RadTabStrip1_OnTabClick">
        </telerik:RadTabStrip>
        <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" Height="100%"
            Width="100%" CssClass="" OnPageViewCreated="RadMultiPage1_PageViewCreated">
        </telerik:RadMultiPage>
        <%--        <div id="textDiv" style="font: 1em/1.2em 'Arial', sans-serif;" ondblclick="OpenAddAdjustmentWindow()">
            <p>
                <strong>Test Adjustment Addition Form</strong></p>
            </div>
            <br />
    --%>
        <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
     
            <script type="text/javascript">
                //<![CDATA[
     
                function OpenAddAdjustmentWindow() {
     
                    radopen("Controls/AdjustmentWorkFlow/NewAdjustment.aspx", "AddAdjustmentDialog");
                }
     
                function OpenAddAdjustmentPage() {
     
                    window.open("Controls/AdjustmentWorkFlow/NewAdjustment.aspx", "AddAdjustmentDialog");
                }
     
                function onTabSelecting(sender, args) {
                    if (args.get_tab().get_pageViewID()) {
                        args.get_tab().set_postBack(false);
                    }
                }
     
                function validationFailed(sender, eventArgs) {
                    $(".ErrorHolder").append("<p>File extension validation failed for '" + eventArgs.get_fileName() + "'.</p>").fadeIn("slow");
                }
     
                function onRequestStart(sender, args) {
                    if (args.get_eventTarget().indexOf("ExportToExcelButton") >= 0) {
                        args.set_enableAjax(false);
                    }
                }
                var imageButtonPath = null;
     
                function RowDblClicked(sender, eventArgs) {
                    var grid = sender;
                    var rowIndex = eventArgs.get_itemIndexHierarchical();
                    if (rowIndex.indexOf(':') != -1) {
                        rowIndex = rowIndex.substr(rowIndex.lastIndexOf('_') + 1);
                    }
                    var tableView = eventArgs.get_tableView();
                    var row = tableView.get_dataItems()[rowIndex];
                    if (tableView.getCellByColumnUniqueName(row, "ExpandColumn")) {
                        var imageButton;
                        if (row.get_expanded() == false) {
                            row.set_expanded(true);
                            imageButton = tableView.getCellByColumnUniqueName(row, "ExpandColumn").childNodes[0];
                            imageButton.className = "rgCollapse";
                        }
                        else {
                            row.set_expanded(false);
                            imageButton = tableView.getCellByColumnUniqueName(row, "ExpandColumn").childNodes[0];
                            imageButton.className = "rgExpand";
                        }
                    }
                }
                //]]>
            </script>
     
        </telerik:RadCodeBlock>
    </asp:Content>
    <asp:Content ID="Content4" runat="server" ContentPlaceHolderID="RadWindowControlContent">
        <telerik:RadWindowManager ID="RadWindowManager1" runat="server">
            <Windows>
                <telerik:RadWindow ID="AddAdjustmentDialog" runat="server" Title="Editing record"
                    Height="500px" Width="757px" Left="250px" ReloadOnShow="false" ShowContentDuringLoad="false"
                    Modal="true" VisibleStatusbar="false" />
            </Windows>
        </telerik:RadWindowManager>
    </asp:Content>

  2. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 07 Oct 2011 Link to this post

    Hi Tim,

    I assembled a project from the provided sample code below. I declared a variable var $ = $telerik.$ and now everything works as expected.  Please review the attached project.

    Regards,
    Peter Filipov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Tim
    Tim avatar
    60 posts
    Member since:
    May 2011

    Posted 07 Oct 2011 Link to this post

    Thanks Peter, I tried that fix this morning and it still fails to work for me. This is the only jquery method called 'fileUploaded' in the project so I don't know what else could be interfering. I do have jquery in  the Master and content page. When I get a chance I will have to expand on this project you sent and keep adding things until it breaks. Thanks this is a low level problem for me so I will update if I find out what was interfering.
  5. Lukus
    Lukus avatar
    13 posts
    Member since:
    Nov 2010

    Posted 12 Dec 2011 Link to this post

    I am having this same issue and I cannot define a variable like you did(var $ = $telerik.$) because it breaks other methods in my master page.  Do you have any other suggestions?  I am getting the same error on this line of my "OnClientFileUploaded":

    var $row = $(args.get_row());

    Thanks for your help.
  6. Peter Filipov
    Admin
    Peter Filipov avatar
    1028 posts

    Posted 15 Dec 2011 Link to this post

    Hi Lukus,

    $telerik.$ is referring to the JQuery library. If you additionally have a reference to the JQuery that probably is causing the incorrect behavior. In order to resolve the problem faster, please change the provided sample project to reproduce your problem and send it for a local test.

    All the best,
    Peter Filipov
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017