Handsontable Select2 Dependent Dropdowns

Question

I have two select2 dropdowns and I want to change options the second dropdown depending on first dropdown.

For example,

        {
          data: 'country_id',
          editor: 'select2', 
          renderer: customDropdownRenderer,
          select2Options: { 
                  data: {!! $production_units !!} ,
                  dropdownAutoWidth: true,
          }
        },
        {
          data: 'state_id',
          editor: 'select2', 
          renderer: customDropdownRenderer,
          select2Options: { 
                  data: [],
                  dropdownAutoWidth: true,
                  width: 'resolve'
          }
        },

Depending on country_id, I want to change select2 options of state_id. I know how to make this work with just select2, but I am not able to figure out how to make it work with handsontable.

I have change select2Options in afterChange, but how to do that?

  afterChange: function (change, source) {

        if(change)
        {

          if(change[0][1] == 'country_id')
          {
            $.get("/api/states?country="+change[0][3], function(data){

                 //What should be done here?

            });
          }

        }

      },

Answer 1

You retrieve all the states for that country. Make sure the states list is in the same format that select2 expects.

Then loop through the columns list and determine the dependent column for the current column that has been modified.

Get the cell properties:

var cellProperties = instance.getCellMeta(rowIndex, dependentColumnIndex);

Update the select2 source:

cellProperties['select2Options'].data = [states list];