Handsontable Select2 Dynamic Options Code Answer

Hello Developer, Hope you guys are doing great. Today at Tutorial Guruji Official website, we are sharing the answer of Handsontable Select2 Dynamic Options without wasting too much if your time.

The question is published on by Tutorial Guruji team.

I am using handsontable with the select2 editor but I cannot seem to make dynamic options work with the dropdown menu, i.e. the options set at the the time of the handsontable initialisation are the only options that ever seem to show.

I have tried using a global variable as the source of the options and updating that at various points in my code and also using a function to return the same variable but neither attempt seems to work.


var hot;
var data = [];

function customDropdownRenderer(instance, td, row, col, prop, value, cellProperties) {

    if (instance.getCell(row, col)) {

    var selectedId;

    var colOptions = cellProperties.select2Options.data;

    if (colOptions != undefined) {

        for (var index = 0; index < colOptions.length; index++) {
            if (parseInt(value) === colOptions[index].id) {
                selectedId = colOptions[index].id;
                value = colOptions[index].text;            

        Handsontable.TextCell.renderer.apply(this, arguments);

var  requiredText = /([^s])/;


      $container = $("#example1"),
      $parent = $container.parent(),

    hot = new Handsontable($container[0], {
        columnSorting: true,
        stretchH: 'all',
        startRows: 8,
        startCols: 5,
        rowHeaders: true,
        colHeaders: ['Description', 'Cost', 'Remarks'],
        columns: [
            { data: 'description' },
                data: 'cost',
                editor: 'select2',
                renderer: customDropdownRenderer,
                select2Options: { data: getData(), dropdownAutoWidth: true }
            { data: 'remarks' },
        minSpareCols: 0,
        minSpareRows: 1,
        contextMenu: true,
        data: []

    data = [{id:'fixed',text:'Fixed'},{id:'variable',text:'Variable'}];

function getData() {
    return data;



You have defined data multiple times and it is causing contention.

The following changes will fix it:

Define the following immediately after the .ready() function:

var source = [{id:’fixed’,text:’Fixed’},{id:’variable’,text:’Variable’}];

and update the select2Options to the following:

select2Options : { data: source, dropdownAutoWidth: true }

We are here to answer your question about Handsontable Select2 Dynamic Options - If you find the proper solution, please don't forgot to share this with your team members.

Related Posts

Tutorial Guruji