@progress/kendo-spreadsheet-vue-wrapper/docs/disabled-cells.md

Kendo UI Spreadsheet wrapper for Vue.js

---
title: Disabled Cells
page_title: Disabled Cells - Spreadsheet - Kendo UI for Vue
description: "Disabling cells in the Kendo UI Spreadsheet wrapper for Vue."
slug: disabledcells_spreadsheet
position: 3
---

# Disabled Cells

The following demo shows how you can disable cells in the Spreadsheet.

{% meta id:foo height:550 theme:bootstrap %}
```html-preview
<div id="vueapp" class="vue-app">
    <button class="k-button" @click="onClick">Disable UnitPrice</button>
    <br />
    <br />
    <kendo-spreadsheet ref="spreadsheet">
        <kendo-spreadsheet-sheet :name="'Food Order'" :data-source="localdatasource">
        </kendo-spreadsheet-sheet>
    </kendo-spreadsheet>
</div>
```
```js
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: {
        localdatasource: [{
            "ProductID": 1,
            "ProductName": "Chai",
            "UnitPrice": 18,
            "UnitsInStock": 39,
            "Discontinued": false,
        },{
            "ProductID": 2,
            "ProductName": "Chang",
            "UnitPrice": 17,
            "UnitsInStock": 40,
            "Discontinued": false,
        },{
            "ProductID": 3,
            "ProductName": "Aniseed Syrup",
            "UnitPrice": 10,
            "UnitsInStock": 13,
            "Discontinued": false,
        },{
            "ProductID": 4,
            "ProductName": "Chef Anton",
            "UnitPrice": 22,
            "UnitsInStock": 53,
            "Discontinued": false,
        },{
            "ProductID": 5,
            "ProductName": "Chef Gumbo Mix",
            "UnitPrice": 21.35,
            "UnitsInStock": 0,
            "Discontinued": true,
        },{
            "ProductID": 6,
            "ProductName": "Boysenberry Spread",
            "UnitPrice": 25,
            "UnitsInStock": 120,
            "Discontinued": false,
        }]
    },
    methods: {
      onClick: function () {
        var range = this.$refs.spreadsheet.kendoWidget().activeSheet().range("C1:C7");
        var enabled = range.enable();

        if (enabled === null) {
            enabled = true;
        }

        //Enable / disable specified range
        range.enable(!enabled);
      }
    }
})
```
{% endmeta %}

## Suggested Links

* [Kendo UI DataSource Component](https://docs.telerik.com/kendo-ui/api/javascript/data/datasource)
* [Kendo UI Spreadsheet for jQuery](https://docs.telerik.com/kendo-ui/controls/data-management/spreadsheet/overview)
* [API Reference of the Spreadsheet Widget](https://docs.telerik.com/kendo-ui/api/javascript/ui/spreadsheet)