Hello!
In @handsontable/vue: 3.0.0, I custom the contextMenu and build a modal to change cell’s font-size.
I expect to render cell style with CellMeta. But it throws TypeError: Cannot read property 'updateSettings' of null.
Did I do anything wrong?
thanks!
<div id="app">
<div id="handsontable" ref="handsontable">
<HotTable :id="id" :settings="settings" ref="reportFormat" @openModal="openModal(...arguments)"></HotTable>
</div>
<modal v-if="modalVisible.fonts" @close="closeModal()">
<h3 slot="header">Font Size</h3>
<div slot="body" class="modal-body-wrapper">
<div class="modal-field-row">
<div class="title">Size</div>
<div class="field-wrapper">
<input type="text" v-model="fonts.size">
</div>
</div>
</div>
<div slot="footer">
<button class="modal-default-button btn kk-modal-btn" @click="closeModal()">Cancel</button>
<button class="btn kk-btn-primary kk-modal-btn" @click="submitModal()">Submit</button>
</div>
</modal>
</div>
import HotTable from '@handsontable/vue';
import Handsontable from 'handsontable';
import Vue from 'vue';
Handsontable.renderers.registerRenderer('cellFontRender', function (hotInstance, td, row, column, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
if (row == 0 && column == 0) {
var cellMeta = hotInstance.getCellMeta(row, col);
// Do something
}
});
new Vue({
el: "#app",
data: function() {
return {
id: "test-hot",
settings: {
data: Handsontable.helper.createSpreadsheetData(5, 5),
colHeaders: true,
contextMenu: {
items: {
'font'：{
name: 'Font Setting',
callback: function (key, options) {
var selection = this.getSelectedRange();
var row = selection[0].to.row;
var col = selection[0].to.col;
this.rootElement.__vue__.$emit('openModal', row, col);
}
}
}
},
cells: function (row, col, prop) {
var cellProperties = {};
cellProperties.renderer = 'cellFontRender';
return cellProperties;
},
}
};
},
methods: {
openModal: function (row, col) {
// Get cell meta
var cellMeta = ht.getCellMeta(row, col);
this.fonts.size = (cellMeta.fontSize != undefined) ? (cellMeta.fontSize) : (12);
},
submitModal: function () {
// use ht.setCellMeta(row, col, 'fontSize', this.fonts.size);
},
},
components: {
HotTable
}
});