[GH #7861] Unable to Update the Source for Custom Key-Value List using a Custom Button

Getting help Issues
,
1

I’m using a modified version of the [Ref: Handsontable example - JSFiddle - Code Playground].

Requirement

I want to:

  1. Display a dropdown in a cell using the custom key-value-list type.
  2. Show a button inside the cell (e.g., “Show All”).
  3. When clicked, the button should:
  • Fetch a new list of key-value pairs asynchronously.
  • Replace the existing dropdown options (source) with the new list dynamically.

UpdateSettings

spreadsheet.updateSettings({
  cells: function (row, col, prop) {
    const rowData = this.instance.getSourceDataAtRow(row);

    if (prop === 'cutom_field') {
      return {
        type: 'key-value-list',
        source: rowData._cutom_field_data || [],
        customSuffixButton: {
          label: 'Show All',
          onClickCallback: ({ row, col, hot }) => {
            // Simulated async call
            fetchAllOptions(function (responseData) {
              const allOptions = responseData.data;

              // Update source of the dropdown dynamically
              hot.setCellMeta(row, col, 'source', allOptions);

         
              hot.render();
        
            });
          }
        }
      };
    }
  }
});

CustomRenderer

const config = cellProperties.customSuffixButton;

if (config) {
  const btn = document.createElement('button');

  // Label
  btn.textContent = config.label || 'Action';
  btn.className = 'btn btn-sm btn-primary';

  // Style
  btn.style.float = 'right';
  btn.style.marginLeft = '8px';
  btn.style.padding = '2px 6px';
  btn.style.fontSize = '12px';

  // Callback
  btn.onclick = function () {
      config.onClickCallback({
        row,
        col,
        prop,
        hot,
        cellProperties
      });
  };

  TD.appendChild(btn);
}

Problem

  • The button appears correctly, and the callback is fired.
  • However, the dropdown does not reflect the new list, and the UI continues to show the old options.
2

Hi @sanket.more

Thank you for contacting us. I can’t see your changes in the example you sent.

It’s worth mentioning that we will be working on implementing the key-value dropdown natively in Handsontable shortly.

I would recommend to wait for our official implementation as the example you want to base your version on isn’t up to production code standards and it’s more of a proof of concept.

You can follow this issue to check the status of the implementation: Autocomplete: Attach related data to autocomplete choices · handsontable/handsontable · Discussion #7861 · GitHub