Spreadsheet - Import/Export an Excel File

Note: The Import functionality uses RadAsyncUpload for file selection and management of the uploaded file. Since the IE 9 uses Silverlight module, the import functionality in the demo will not be available under this version of the Internet Explorer.

  • Home
  • Insert
  • Undo
  • Redo
  • Paste
  • Cut
  • Copy
  • Bold
  • Italic
  • Underline
  • Arial
  • Pick Color(Current Color is blank)
  • Pick Color(Current Color is blank)
  • All borders
    • All borders
    • Inside borders
    • Inside horizontal borders
    • Inside vertical borders
    • Outside borders
    • Left border
    • Top border
    • Right border
    • Bottom border
    • No border
  • Pick Color(Current Color is blank)
  • Horizontal alignment
    • Align Left
    • Align Center
    • Align Right
    • Justify
  • Vertical alignment
    • Align Top
    • Align Middle
    • Align Bottom
  • Wrap text
  • Merge Cells
    • Merge Cells
    • Merge Horizontally
    • Merge Vertically
    • Unmerge
  • Add column left
    • Add column left
    • Add column right
    • Add row above
    • Add row below
  • Delete cells
    • Delete column
    • Delete row
  • Cut
  • Copy
  • Paste
  • Hide
  • Delete
  • Hide
  • Delete
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The demo shows two important functionalities that could be easily achieved with the RadSpreadsheet Import from an Excel File and Export to an Excel File. This can be achieved, using the Client API of the control. For Export you can invoke the saveAsExcel() function on the RadSpreadsheet object and the file will directly prompt you to download in your browser.

As for the Import - you can use the fromFile() passing the actual Excel file to the function. In the demo, the RadAsyncUpload control is used for selection of a file. You can observe how th OnClientFileSelected client-side event of the RadAsyncUpload is used, in order to get a reference to the selected file and supply the RadSpreadsheet with it:

            var file = args.get_fileInputField().files[0];          // get the selected file from the RadAsyncUpload
            var spreadsheet = $find("<%= RadSpreadsheet1.ClientID %>");
            spreadsheet.fromFile(file);      //supply the RadSpreadsheet control with the Excel file.
            $(args.get_row()).remove();         //remove the row, visualizing the selection in the RadAsyncUpload

        

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb"  Inherits="Spreadsheet.Examples.Import_Export.DefaultVB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
     <qsf:MessageBox ID="MessageBox" Type="Info" Icon="Warning" runat="server" Visible="true">
        <p> 
            <b>Note</b>: The <b>Import</b> functionality uses RadAsyncUpload for file selection and management of the uploaded file. Since the <b>IE 9</b> uses Silverlight module, 
            the import functionality in the demo will not be available under this version of the Internet Explorer.
        </p>
    </qsf:MessageBox>
    <div class="demo-container">
        <div class="buttons">
            <telerik:RadButton runat="server" ID="btnExport" AutoPostBack="false"
                OnClientClicked="exportFile" Text="Export to Excel File">
            </telerik:RadButton>
            <telerik:RadAsyncUpload runat="server" ID="RadAsyncUpload1" HideFileInput="true" AllowedFileExtensions=".xlsx, .xls"
                OnClientFileSelected="importFile" Localization-Select="Import From Excel File">
            </telerik:RadAsyncUpload>
        </div>
        <telerik:RadSpreadsheet runat="server" ID="RadSpreadsheet1">
            <Toolbar>
                <telerik:SpreadsheetToolbarTab Text="Home">
                    <telerik:SpreadsheetToolbarGroup>
                        <telerik:SpreadsheetTool Name="Undo" ShowLabel="false" />
                        <telerik:SpreadsheetTool Name="Redo" ShowLabel="false" />
                    </telerik:SpreadsheetToolbarGroup>
                    <telerik:SpreadsheetToolbarGroup>
                        <telerik:SpreadsheetTool Name="Paste" ShowLabel="false" />
                        <telerik:SpreadsheetTool Name="Cut" ShowLabel="false" />
                        <telerik:SpreadsheetTool Name="Copy" ShowLabel="false" />
                    </telerik:SpreadsheetToolbarGroup>
                    <telerik:SpreadsheetToolbarGroup>
                        <telerik:SpreadsheetTool Name="Bold" ShowLabel="false" />
                        <telerik:SpreadsheetTool Name="Italic" ShowLabel="false" />
                        <telerik:SpreadsheetTool Name="Underline" ShowLabel="false" />
                    </telerik:SpreadsheetToolbarGroup>
                    <telerik:SpreadsheetToolbarGroup>
                        <telerik:SpreadsheetTool Name="FontFamily" ShowLabel="false" />
                    </telerik:SpreadsheetToolbarGroup>
                    <telerik:SpreadsheetToolbarGroup>
                        <telerik:SpreadsheetTool Name="FontSize" ShowLabel="false" />
                    </telerik:SpreadsheetToolbarGroup>
                    <telerik:SpreadsheetToolbarGroup>
                        <telerik:SpreadsheetTool Name="BackgroundColor" ShowLabel="false" />
                        <telerik:SpreadsheetTool Name="TextColor" ShowLabel="false" />
                    </telerik:SpreadsheetToolbarGroup>
                    <telerik:SpreadsheetToolbarGroup>
                        <telerik:SpreadsheetTool Name="BorderType" ShowLabel="false" />
                        <telerik:SpreadsheetTool Name="BorderColor" ShowLabel="false" />
                    </telerik:SpreadsheetToolbarGroup>
                    <telerik:SpreadsheetToolbarGroup>
                        <telerik:SpreadsheetTool Name="HorizontalAlignment" ShowLabel="false" />
                        <telerik:SpreadsheetTool Name="VerticalAlignment" ShowLabel="false" />
                    </telerik:SpreadsheetToolbarGroup>
                    <telerik:SpreadsheetToolbarGroup>
                        <telerik:SpreadsheetTool Name="TextWrap" ShowLabel="false" />
                        <telerik:SpreadsheetTool Name="MergeCells" ShowLabel="false" />
                    </telerik:SpreadsheetToolbarGroup>
                </telerik:SpreadsheetToolbarTab>
                <telerik:SpreadsheetToolbarTab Text="Insert">
                    <telerik:SpreadsheetToolbarGroup>
                        <telerik:SpreadsheetTool Name="InsertCells" ShowLabel="false" />
                        <telerik:SpreadsheetTool Name="DeleteCells" ShowLabel="false" />
                    </telerik:SpreadsheetToolbarGroup>
                </telerik:SpreadsheetToolbarTab>
            </Toolbar>
        </telerik:RadSpreadsheet>

    </div>

    <script type="text/javascript">
        var $ = $telerik.$;

        function exportFile() {
            var spreadsheet = $find("<%= RadSpreadsheet1.ClientID %>");
            spreadsheet.saveAsExcel();
        }

        function importFile(sender, args) {
            if (!(Telerik.Web.Browser.ie && Telerik.Web.Browser.version == "9")) {
                var file = args.get_fileInputField().files[0];
                var spreadsheet = $find("<%= RadSpreadsheet1.ClientID %>");
                spreadsheet.fromFile(file);
            }

            $(args.get_row()).remove();
        }
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?