Telerik skin

Spreadsheet - Images

  • Home
  • Open...
  • Insert image
  • Export...
  • Cut
  • Copy
  • Paste
  • Hide
  • Unhide
  • Delete
  • Hide
  • Unhide
  • Delete
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The demo exhibits the Image support as of R1 2020 SP1. Images can be added via the built-in InsertImage tool. They also can be added/removed programmatically via the API of the underlying Kendo widget.

The workbook with Images can also be imported and exported using the built-in import/export tools.

  • DefaultCS.aspx
<%@ Page Language="C#" AutoEventWireup="true"  %>

<!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>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container no-bg">
        <telerik:RadClientExportManager runat="server"></telerik:RadClientExportManager>  
        <telerik:RadSpreadsheet runat="server" ID="RadSpreadsheet1">
            <Toolbar>
                <telerik:SpreadsheetToolbarTab Text="Home">
                    <telerik:SpreadsheetToolbarGroup>
                        <telerik:SpreadsheetTool Name="Open" ShowLabel="true" />
                        <telerik:SpreadsheetTool Name="InsertImage" ShowLabel="true" />
                        <telerik:SpreadsheetTool Name="ExportAs" ShowLabel="true" />
                    </telerik:SpreadsheetToolbarGroup>
                </telerik:SpreadsheetToolbarTab>
            </Toolbar>
        </telerik:RadSpreadsheet>
        <telerik:RadScriptBlock runat="server">
            <script type="text/javascript">
                function getExcelFileBlob(successHandler) {
                    // download file using JavaScript
                    // https://stackoverflow.com/a/29556434
                    var xhr = new XMLHttpRequest();
                    xhr.open('GET', 'Spreadsheet-Images.xlsx', true);
                    xhr.responseType = 'blob';
                    xhr.onload = function (e) {
                        if (this.status == 200) {
                            var blob = new Blob([this.response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });

                            successHandler(blob);
                        } else {
                            alert('Unable to download excel.')
                        }
                    };
                    xhr.send();
                }

                function pageLoadHandler() {
                    var spreadsheet = $find("<%= RadSpreadsheet1.ClientID %>");
                    getExcelFileBlob(function (blob) {
                        spreadsheet.fromFile(blob);
                    });
                }

                Sys.Application.add_load(pageLoadHandler);
            </script>
        </telerik:RadScriptBlock>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?