How to prevent row from beeing removed?

#1

I have (probably a bizzare) setting that first row of the table must behave similarly to the header row. I have to disable option of removing that row by any means.

For that purpose I am creating a CellMeta for all cells in the first row for that as follows.

  if (row === 0) {
    const classes = ['header-row'];
    if (field.isRequired) {
      classes.push('required');
    }
    if (field.canBeAutogenerated) {
      classes.push('autogenerated');
    }
    const commentText = createCommentHeaderCommentText(field);
    const commentObj: CommentObject = commentText ? {
      value: commentText,
      readOnly: true
    } : null;
    return {
      disableVisualSelection: true,
      editor: null,
      readOnly: true,
      className: classes,
      label: {value: field.label},
      comments: !!commentObj,
      comment: commentObj,
      renderer: field.isRequired ? asteriskRenderer : undefined,
      allowEmpty: !field.isRequired,
      allowRemoveRow: false, // <----------- NOT WORKING 
    };
  }

I have set allowRmoveRow:false, but for whatever resons I can still remove that very first row using context menu->remove row or contex menu->remove rows.

Is it possible to disallow removal of any arbitrary row somehow?

#2

Hi @sebastian.choina

the allowRemoveRow is a global settings, it works on the table level https://jsfiddle.net/s37kw6yq/6/

May I ask what are other settings in your context menu? I think that it might be a good choice to create a custom menu that does not have some of the options for a given row index.

#3

I have indeed tried that, but it was not working for some reasons so I am trying different approaches.

 private createContextMenuSettings(): GridSettings['contextMenu'] {
    const removeRowOpt = {
      name: 'Remove row',
      hidden: () => {
        console.log('ist not even called...', this.hotInstance().getSelectedRangeLast().from.row);
        return this.hotInstance().getSelectedRangeLast().from.row === 0;
      }
    };

    return {
      // @ts-ignore
      // row_above: {hidden:()=>{console.log(this)}},
      // row_below: {},
      // sp1: '---------',
      remove_row: removeRowOpt,
      clear_column: {},
      sp2: '---------',
      make_read_only: {},
      alignment: {},
      sp3: '---------',
      undo: {},
      redo: {},
      copy: {},
      cut: {}
    };
  }
#4

Hm… Generally it works as you described http://jsfiddle.net/p5w7vy3n/ But maybe you have not set the reference to the instance of Handsontable correctly. Does the menu show at all?

#5

Yes menu was showing. The issue was nesting everything into { items :{here}} as it is required in this variant.
Also I had to add hidden function in a loop as all items has to be hidden for header row - It would be nice to have 1 hook that can do that (like CellMeta factory - i function for evey cell).

#6

That’s true. Constructing and managing custom menus is time-consuming. It would be better to (for example) keep all options and have the ability to change/add a single option.

#7