Cell Comments

You can enable user comments for each Spreadsheet cell.

The component allows you to enable cell comments upon its initialization and provides the option for the user to add comments at any moment. In addition, the Rage API exposes options for setting cell comments programmatically.

<div id="vueapp" class="vue-app">
    <button class="k-button" @click="onClick">Click to add or remove the comment from the A2 cell.</button>
    <br />
    <br />
    <kendo-spreadsheet ref="spreadsheet">
        <kendo-spreadsheet-sheet :name="'Comments'"
                                 :rows="firstRows"
                                 :columns="firstColumns">
        </kendo-spreadsheet-sheet>
    </kendo-spreadsheet>
</div>
Vue.use(SpreadsheetInstaller);

new Vue({
    el: '#vueapp',
    mounted () {
        var spreadsheet = this.$refs.spreadsheet.kendoWidget();
        spreadsheet.element.css('height', '400px');
        spreadsheet.element.css('width', '100%');
        spreadsheet.resize();
    },
    data: {
        firstRows: [{
            cells: [{
                value: "This cell has a comment.",
                bold: true,
                comment: "Comment set on the cell with the Spreadsheet initialization."
            }]
        }, {
            cells: [{
                value: "This cell will get a comment on button click.",
                bold: true
            }]
        }],
        firstColumns: [{
            width: 300
        }]
    },
    methods: {
        onClick: function () {
            var spreadsheet = this.$refs.spreadsheet.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);
            }
        }
    }
})

In this article