New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Cell Comments

  • Home
  • Open...
  • Export...
  • Insert Comment
  • Cut
  • Copy
  • Paste
  • Hide
  • Unhide
  • Delete
  • Hide
  • Unhide
  • Delete

The demo exhibits the Comment support as of R1 2020 SP1. Comments can be added/removed programmatically via the API of the underlying Kendo widget.

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

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

<!DOCTYPE html>
<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">
        <telerik:RadButton ID="RadButton1" RenderMode="Lightweight" runat="server" OnClientClicked="insertComment" Text="Click to add / remove comment from A2 cell" AutoPostBack="false" UseSubmitBehavior="false" Style="margin-bottom: 20px"></telerik:RadButton>
        <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:SpreadsheetTool Name="InsertComment" ShowLabel="true" />
                    </telerik:SpreadsheetToolbarGroup>
                </telerik:SpreadsheetToolbarTab>
            </Toolbar>
        </telerik:RadSpreadsheet>
        <script>
            function insertComment(sender, args) {
                var spreadsheet = $find("<%= RadSpreadsheet1.ClientID %>").get_kendoWidget();

                var range = spreadsheet.activeSheet().range("A2");
                var comment = range.comment();

                if (comment === null) {
                    range.comment("Comment added using range API call");
                } else {
                    range.comment(null);
                }
            }
            function getExcelFileBlob(successHandler) {
                // download file using JavaScript
                // https://stackoverflow.com/a/29556434
                var xhr = new XMLHttpRequest();
                xhr.open('GET', 'Spreadsheet-CellComments.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