[GH #9894] Customize predefined context menu properties

Tags: #<Tag:0x00007efc719a0bb8> #<Tag:0x00007efc719a0730>
#1

Continuing the discussion from Context menu customizations - Nested row context actions:

The previous article discussed adding customized actions while retaining predefined items.
However, it did not cover renaming or adding hidden/disable functions to the predefine menu items.
I attempted to keep the original callback function and rewrite name/disable/hidden, but encountered issues.
Could you please provide assistance?

demo:https://jsfiddle.net/khcojfLg/2/
Rename the default name of remove_row and disable it in the first row.
However, after that, the click action is malfunctioning.

#2

Hi @jimmy.yang

Here https://stackblitz.com/edit/vitejs-vite-ihz2e4?file=main.js,style.css&terminal=dev is an example with the use of the predefined row_above option with:

  • custom name
  • hidden() for the first column
  • disabled() for the first row

Menu code

 contextMenu: {
    callback(key, selection, clickEvent) {
      // Common callback for all options
      console.log(key, selection, clickEvent);
    },
    items: {
      row_above: {
        name() { // `name` can be a string or a function
          return '<b>Custom row adding</b>'; 
        },
        disabled() { 
          // Disable option when first row was clicked
          return this.getSelectedLast()[0] === 0; // `this` === hot
        },
        hidden() { 
          // Hide the option when the first column was clicked
          return this.getSelectedLast()[1] == 0; // `this` === hot
        },
      }
    }
  }

Woukd you need anything more than that?

#3

Hi @aleksandra_budnik,

Apologies for causing misunderstanding.

Based on the previous reply, it appears that we cannot set items with an object data type when attempting to add an menu item associated with the nestedRow plugin.

Therefore, you provided another solution defining items as an array. However, in this array-based solution, I’m unsure how to keep the original operaiton (callback function) and set the name/disabled function as an object type solution.

#4

Ah, yes, I am sorry. You meant the add child, not add row.

Yes, unfortunately, this is a bug that hasn’t been scheduled to be fixed yet. Here https://github.com/handsontable/handsontable/issues/9894 is the official issue report.

I will notify you as soon as we fix it.

In the meanwhile, we can work on a workaround if you wish. For example, you can alter the name of any context menu option while uploading an altered language file. Reference: https://handsontable.com/docs/javascript-data-grid/language/

1 Like