Glow skin

Spreadsheet - Import/Export an Excel File

Note: As of R1 2020 SP1 the import/export comes built-in. Older versions can still use the RadAsyncUpload or a file input to import an Excel file or RadClientExportManager to export to PDF and the API to export to Excel.

  • Home
  • Insert
  • Open...
  • Export...
  • 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
  • Unhide
  • Delete
  • Hide
  • Unhide
  • Delete
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The R1 2020 SP1 release introduces the new ExportAs and Open built-in tools that allow easy import of Excel files and export to Excel or PDF file.

The previous versions can use the Client API of the control for import/export of Excel files.

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. For example, the RadAsyncUpload control can be used for selection of a file. In the OnClientFileSelected client-side event of the RadAsyncUpload, get a reference to the selected file and supply the RadSpreadsheet with it:

            function OnClientFileSelected(sender,args) {
                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
            }         
        

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs"  Inherits="Spreadsheet.Examples.Import_Export.DefaultCS" %>

<!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="Info" runat="server" Visible="true">
        <p> 
            <b>Note</b>: As of <b>R1 2020 SP1</b> the import/export comes built-in. Older versions can still use the RadAsyncUpload or a file input to import an Excel file or RadClientExportManager to export to PDF and the API to export to Excel.
        </p>
    </qsf:MessageBox>
    <div class="demo-container">
        <telerik:RadSpreadsheet runat="server" ID="RadSpreadsheet1">
            <Toolbar>
                <telerik:SpreadsheetToolbarTab Text="Home">
                     <telerik:SpreadsheetToolbarGroup>
                        <telerik:SpreadsheetTool Name="Open" ShowLabel="true" />
                        <telerik:SpreadsheetTool Name="ExportAs" ShowLabel="true" />
                    </telerik:SpreadsheetToolbarGroup>
                    <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>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?