Custom Check box in Drop down menu

Tags: #<Tag:0x00007f8b2919b0e8>
#1

Is there any way possible to add a tag like feature in drop down menu.
I have maintained an array of tags for each column in my angular app.
I just want to add such a functionality that a user can either check or uncheck that tag.

Here is my code

this.table_settings= {
  maxRows: this.MaxRows,
  height: this.tableHeight,
  width: this.tableWidth,
  columns: this.spData.Headers,
  dropdownMenu:{
    callback: function (this, key, options){
    },
    items: [
      'undo','redo','alignment',
      {
        key:'col_left',
        name: 'Insert Column to the Left',
        callback: (key, option) => {
          this.addColumnDialog();
        }
      },
      {
        key:'rename_column',
        name: 'Rename Column',
        callback: (key, option) => {
          this.addRenameDialog(option[0].end.col);
        }
      },{
        key:'tag_1',
        name: '<input type="checkbox">Tag Column',
        callback: (key, option) => {
          this.addTag(key, option[0].end.col);
        }
      }
    ]
  }
}

}

Checkbox in drop down menu of the column header
#2

Hi @sahmed-int

I’m back with an example http://jsfiddle.net/ctnm68oh/

You need to add disabled: true to the menu option to do not allow to close the windows before user changes the checkbox state. Additionally it looks better if you also change the color of the text cause by default it is grey (CSS section of the demo).

#3

Its working now, Thank you.

#4

Great to hear that. Thank you for the update.

#5