How to set default global configuration options

#1

Hey, I am sorry if this is a stupid question. I am having a hard time understanding how I can set default configuration options globally within my project for all instances of handsontable.

What I am trying to set,

imeFastEdit: true

What I have tried so far,

  1. Directly changed the default in handsontable.js => did not work
  2. Set it alongside my definition in individual instances => worked
  3. Set it in a common.js script to overwrite the default

Here is what I tried doing in approach 3,

Handsontable.hooks.add('afterInit', function () {
    console.log("hot", this);
    if (typeof Handsontable !== 'undefined') {
        Handsontable.DefaultSettings = Object.assign({}, Handsontable.DefaultSettings, {
            imeFastEdit: true,
            licenseKey: 'non-commercial-and-evaluation'
        });
        console.log('Handsontable library is loaded', Handsontable);
    } else {
        console.error('Handsontable library is not loaded');
    }
});

In the above snippet, the weird part is it sets the imeFastEdit (and licenseKey for faster debugging if it works or not) but it still does not work. What I mean is the console.log will still show the alert saying license key is not set and the imeFastEdit wont work

For reference here is my example definition,

hot = new Handsontable(container, {
	//licenseKey: 'non-commercial-and-evaluation',
	data: data,
    themeName: 'ht-theme-horizon',
    language: 'ja-JP',
	manualRowResize: true,
	rowHeaders: true,
	rowHeights: 50,
	className: 'htMiddle',
	renderer: detailRenderer,
    //imeFastEdit: true,
	fillHandle: false,
	preventScrolling: false,
	hiddenColumns: {columns: [0,9,10,11,12, 13, 14, 15, 16, 17, 18, 20, 21]},
	filters: true,
	dropdownMenu: ['filter_by_condition', 'filter_by_value', 'filter_action_bar'],
	columns: [・・・],
    manualColumnResize: true,
    manualRowResize: true,
    renderAllRows:true,
    stretchH: 'all',
	afterChange: getChangedRows,
	afterGetRowHeader: function(col, TH) {
		TH.className = 'htMiddle'
	},
	cells: function (row, col) {
		var cellProperties = {};
		cellProperties.renderer = detailRenderer;
		return cellProperties;
		
	}
});

Other ways I tried for approach 3 are:

Handsontable.hooks.add('afterInit', function () {
        if (typeof this.getSettings().imeFastEdit === "undefined") {
            this.updateSettings({ imeFastEdit: true });
            console.log("imeFastEdit has been set to true for instance:", this);
        }
    });
    Handsontable.hooks.add('afterInit', function () {
        this.imeFastEdit = true;
        console.log("imeFastEdit is set to true for instance:", this);
    });

These did not work as well.
I am quite confused as to what the issue is that is causing it to not work properly, if it is something with the way I am defining it or maybe in the syntax itself?
Any help is appreciated, thanks

#2

Hi @param556

I’ll do my best to help.

If the imeFastEdit: true is the only setting that has to be added it might be easier to do it manually. However, of you’d like to build an initial setup and then make it grow with other default settings I may recommend

  • setting up a new instance with a settings variable. Where let settings = { imeFastEdit: true}
  • calling instance.updateSettings() to load settings per given instance
#3

Hi @aleksandra_budnik
First off, thank you for your response. I did initially think of just having imeFastEdit setting but now that I think of it, it makes more sense to have a lot more settings set as default based on our workspace settings like language, theme, headers, etc.

Secondly, the method you mentioned with using instance.updateSettings() I did try a similar approach to that with this.updateSettings({ imeFastEdit: true }); and the setting gets updated but it does not apply itself to the instance.

I will try to come up with a demo as early as possible and send it to you (coz its TGIF here)

#4

Great. Thank you. i will then wait for the demo.