Spreadsheet client-side import file from server and save client-side exported file on server

Thread is closed for posting
1 posts, 0 answers
  1. Peter
    Peter avatar
    13 posts
    Member since:
    May 2016

    Posted 09 Mar 2018 Link to this post

    Requirements

    Telerik Product and Version

    UI for ASP.NET AJAX 2018 R1

    Supported Browsers and Platforms

    all browsers supported by Telerik UI for ASP.NET AJAX suite

    Components/Widgets used (JS frameworks, etc.)

    RadSpreadsheet, .NET 4.0/4.5 C#


    PROJECT DESCRIPTION
     

    The following project shows how you can use the client-side import of the RadSpreadsheet to load a file from the server and how to save on the server the file created from the client-side export functionality.

    This approach can be used to overcome some issues or limitations of the Server-side import/export of the RadSpreadsheet which are not present in the client-side import/export. 

    Markup:

    <%-- Load newer version of jQuery in order to use the $.ajax as below --%>
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
     
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" EnableScriptCombine="false">
    </telerik:RadScriptManager>
    <telerik:RadButton runat="server" ID="ExportButton" Text="Export as Excel" AutoPostBack="true" OnClientClicked="save" OnClick="ExportButton_Click" />
    <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" HideFileInput="true" AllowedFileExtensions=".xlsx, .xls"
        OnClientFileSelected="OnClientFileSelected" OnClientFileDropped="OnClientFileDropped" Localization-Select="Import From Excel File">
    </telerik:RadAsyncUpload>
    <asp:HiddenField runat="server" ID="spreadsheetfile" />
    <telerik:RadSpreadsheet runat="server" ID="RadSpreadsheet1"></telerik:RadSpreadsheet>

     

    <script>
        /* START Load spreadsheet from Excel file from the server*/
        Sys.Application.add_load(pageLoadHandler);
     
        function pageLoadHandler() {
            $.ajax({
                url: '/workbook.xlsx',
                method: 'GET',
                xhrFields: {
                    responseType: 'blob'
                },
                success: function (data, second, third) {
                    var spreadsheet = $find("<%= RadSpreadsheet1.ClientID %>");
                    spreadsheet.fromFile(data);
                }
            });
            }
            /* END Load spreadsheet from Excel file from the server*/
     
            /* START Export to Excel and send exported file to server*/
            function save() {
                var spread = $find("RadSpreadsheet1");
     
                var workbook = new kendo.ooxml.Workbook(spread.get_kendoWidget().toJSON());
                // workbook.toDataURL() is the file in base64 string
                $get("spreadsheetfile").value = workbook.toDataURL();
            }
            /* END Export to Excel and send exported file to server*/
     
            /* START Import from Excel file uploaded or dragged to the AsyncUpload */
            var isDropped = false;
            function OnClientFileDropped(sender, args) {
                var file = args.get_file();
                var spreadsheet = $find("<%= RadSpreadsheet1.ClientID %>");
                spreadsheet.fromFile(file);
                $(args.get_row()).remove();
                isDropped = true;
            }
     
            function OnClientFileSelected(sender, args) {
                if (!isDropped) {
                    var file = args.get_fileInputField().files[0];
                    var spreadsheet = $find("<%= RadSpreadsheet1.ClientID %>");
                    spreadsheet.fromFile(file);
                    $(args.get_row()).remove();
                } else {
                    isDropped = false;
                }
            }
            /* End Import from Excel file uploaded or dragged to the AsyncUpload */
    </script>

     

    Code-behind: 

    protected void ExportButton_Click(object sender, EventArgs e)
    {
        string converted = spreadsheetfile.Value.Replace("data:application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;base64,", string.Empty);
        // get exported Excel file as a byte array
        Byte[] bytes = Convert.FromBase64String(converted);
        File.WriteAllBytes(Server.MapPath("~/App_Data/WorkbookExported.xlsx"), bytes);
    }
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.