Bootstrap 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.

  • DefaultVB.aspx
<%@ Page Language="VB" 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: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>
        <script>
            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>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?