
# Pop-up menu button

The pop-up menu button can be used by specifying column.button = `popup`.

```js
const fields = [
  {
    fieldName: "KorName",
    dataType: "text"
  },
  {
    fieldName: "Gender",
    dataType: "text"
  },
  {
    fieldName: "Age",
    dataType: "number"
  },
  {
    fieldName: "Phone",
    dataType: "text"
  },
  {
    fieldName: "ProductId",
    dataType: "text"
  },
  {
    fieldName: "KorCountry",
    dataType: "text"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "CardNumber",
    dataType: "text"
  },
  {
    fieldName: "Monetary",
    dataType: "text"
  },
  {
    fieldName: "StartDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "EndDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "ToMonth",
    dataType: "number"
  },
  {
    fieldName: "Month",
    dataType: "number"
  },
  {
    fieldName: "Year",
    dataType: "number"
  },
  {
    fieldName: "InterestRate",
    dataType: "number"
  },
  {
    fieldName: "SaveCost",
    dataType: "number"
  },
  {
    fieldName: "SaveMaturity",
    dataType: "number"
  },
  {
    fieldName: "CurrentSave",
    dataType: "number"
  }
];

const columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "100",
    popupMenu: "menu1",
    button: "popup",
    buttonVisibility: "always",
    header: {
      text: "Name",
      styleName: "orange-column"
    },
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "Gender"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "40",
    header: {
      text: "Age"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductId",
    fieldName: "ProductId",
    width: "120",
    header: {
      text: "Product ID"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "100",
    header: {
      text: "Investment Country"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    header: {
      text: "Order Date"
    }
  },
  {
    name: "CardNumber",
    fieldName: "CardNumber",
    width: "140",
    header: {
      text: "Card Number"
    }
  },
  {
    name: "Monetary",
    fieldName: "Monetary",
    width: "40",
    header: {
      text: "Currency"
    }
  },
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "100",
    header: {
      text: "First Payment Date"
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "100",
    header: {
      text: "End Date"
    }
  },
  {
    name: "ToMonth",
    fieldName: "ToMonth",
    width: "40",
    header: {
      text: "Payment Count"
    }
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "40",
    header: {
      text: "Remaining Count"
    }
  },
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "40",
    numberFormat: "0.00",
    header: {
      text: "Interest Rate"
    }
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Payment Amount"
    }
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Maturity Amount"
    }
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Current Balance"
    }
  }
];

const menu = [
  {
    label: "This is menu1.",
    enabled: true,
    children: [
      {
        label: "This is submenu1."
      },
      {
        label: "This is submenu2."
      }
    ]
  },
  {
    label: "This is menu2",
    enabled: false
  },
  {
    label: "-"
  },
  {
    label: "This is menu3",
    type: "check",
    checked: true,
    tag: "check_menu"
  },
  {
    label: "group menu",
    children: [
      {
        label: "group1 - First",
        type: "radio",
        group: "group1",
        checked: true
      },
      {
        label: "group1 - Second",
        type: "radio",
        group: "group1"
      },
      {
        label: "group1 - Third",
        type: "radio",
        group: "group1"
      }
    ]
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
    
    grid.addPopupMenu("menu1", menu);

    grid.onMenuItemClicked = function(g, data, index) {
      alert(data.label);
    };
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;
```

#### Configuring menu information

Each menu item in the pop-up menu can have a `check` state and can be configured as a `radio group` through the `group` property.

```js
var menu = [
   {
     label: "menu1.",
     enabled: true,
     children: [
       {
         label: "This is submenu1."
       },
       {
         label: "This is submenu2."
       }
     ]
   },
   {
     label: "This is menu2",
     enabled: false
   },
   {
     label: "-"
   },
   {
     label: "This is menu3",
     type: "check", //check settings
     checked: true, //check status
     tag: "check_menu"
   },
   {
     label: "group menu", //group and radio
     children: [
       {
         label: "group1 - first",
         type: "radio",
         group: "group1",
         checked: true
       },
       {
         label: "group1 - second",
         type: "radio",
         group: "group1"
       },
       {
         label: "group1 - third",
         type: "radio",
         group: "group1"
       }
     ]
   }
];
```


#### Add PopupMenu

You can add the menu information configured above to the grid with the [addPopupMenu](/refs/Class/GridBase#addpopupmenu) function.
For information on how to set the added `menu1` to a column, check the column setting information.

```js
gridView.addPopupMenu("menu1", menu);
```

#### Column PopupMenu settings

Specify the menu added with addPopupMenu in the column.popMenu property.

```js
var columns = [
   {
     name: "KorName",
     fieldName: "KorName",
     width: "100",
     popupMenu: "menu1",
     button: "popup",
     buttonVisibility: "always",
     header: {
       text: "Name",
       styleName: "orange-column"
     },
   },
   ...
];

gridView.setColumns(columns);
```


#### onMenuItemClicked event

When a menu item is clicked, the [onMenuItemClicked](/refs/Class/GridBase#onmenuitemclicked) event is triggered.

```js
gridView.onMenuItemClicked = function(grid, data, index) {
   alert(data.label);
};
```

#### Other ways to deal with cell buttons

```js
const fields = [
  {
    fieldName: "KorName",
    dataType: "text"
  },
  {
    fieldName: "Gender",
    dataType: "text"
  },
  {
    fieldName: "Age",
    dataType: "number"
  },
  {
    fieldName: "Phone",
    dataType: "text"
  },
  {
    fieldName: "ProductId",
    dataType: "text"
  },
  {
    fieldName: "KorCountry",
    dataType: "text"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "CardNumber",
    dataType: "text"
  },
  {
    fieldName: "Monetary",
    dataType: "text"
  },
  {
    fieldName: "StartDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "EndDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "ToMonth",
    dataType: "number"
  },
  {
    fieldName: "Month",
    dataType: "number"
  },
  {
    fieldName: "Year",
    dataType: "number"
  },
  {
    fieldName: "InterestRate",
    dataType: "number"
  },
  {
    fieldName: "SaveCost",
    dataType: "number"
  },
  {
    fieldName: "SaveMaturity",
    dataType: "number"
  },
  {
    fieldName: "CurrentSave",
    dataType: "number"
  }
];

const columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "100",
    popupMenu: "menu1",
    button: "popup",
    buttonVisibility: "always",
    header: {
      text: "Name",
      styleName: "orange-column"
    },
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "Gender"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "40",
    header: {
      text: "Age"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductId",
    fieldName: "ProductId",
    width: "120",
    header: {
      text: "Product ID"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "100",
    header: {
      text: "Investment Country"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    header: {
      text: "Order Date"
    }
  },
  {
    name: "CardNumber",
    fieldName: "CardNumber",
    width: "140",
    header: {
      text: "Card Number"
    }
  },
  {
    name: "Monetary",
    fieldName: "Monetary",
    width: "40",
    header: {
      text: "Currency"
    }
  },
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "100",
    header: {
      text: "First Payment Date"
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "100",
    header: {
      text: "End Date"
    }
  },
  {
    name: "ToMonth",
    fieldName: "ToMonth",
    width: "40",
    header: {
      text: "Payment Count"
    }
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "40",
    header: {
      text: "Remaining Count"
    }
  },
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "40",
    numberFormat: "0.00",
    header: {
      text: "Interest Rate"
    }
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Payment Amount"
    }
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Maturity Amount"
    }
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Current Balance"
    }
  }
];

const menu = [
  {
    label: "This is menu1.",
    enabled: true,
    children: [
      {
        label: "This is submenu1."
      },
      {
        label: "This is submenu2."
      }
    ]
  },
  {
    label: "This is menu2",
    enabled: false
  },
  {
    label: "-"
  },
  {
    label: "This is menu3",
    type: "check",
    checked: true,
    tag: "check_menu"
  },
  {
    label: "group menu",
    children: [
      {
        label: "group1 - First",
        type: "radio",
        group: "group1",
        checked: true
      },
      {
        label: "group1 - Second",
        type: "radio",
        group: "group1"
      },
      {
        label: "group1 - Third",
        type: "radio",
        group: "group1"
      }
    ]
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
    
    grid.addPopupMenu("menu1", menu);

    grid.onMenuItemClicked = function(g, data, index) {
      alert(data.label);
    };
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

function btnButtonVisibilityAlways() {
  gridView.columnByName("KorName").buttonVisibility = "always";
}

function btnButtonVisibilityDefault() {
  gridView.columnByName("KorName").buttonVisibility = "default";
}

function btnButtonVisibilityVisible() {
  gridView.columnByName("KorName").buttonVisibility = "visible";
}

function btnButtonVisibilityHidden() {
  gridView.columnByName("KorName").buttonVisibility = "hidden";
}
```

- `always`: always displayed
- `default`: Displayed in hovering, focused state
- `visible`: Displays only the focused state
- `hidden`: do not display


```js
gridView.columnByName("KorName").buttonVisibility = "always";
```

```js
gridView.columnByName("KorName").buttonVisibility = "default";
```

```js
gridView.columnByName("KorName").buttonVisibility = "visible";
```

```js
gridView.columnByName("KorName").buttonVisibility = "hidden";
```

#### Add header PopupMenu

You can add menu information to the grid with the [addPopupMenu](/refs/Class/GridBase#addpopupmenu) function.
See below for how to set the added `menu2` to the column header.

```js
const fields = [
  {
    fieldName: "KorName",
    dataType: "text"
  },
  {
    fieldName: "Gender",
    dataType: "text"
  },
  {
    fieldName: "Age",
    dataType: "number"
  },
  {
    fieldName: "Phone",
    dataType: "text"
  },
  {
    fieldName: "ProductId",
    dataType: "text"
  },
  {
    fieldName: "KorCountry",
    dataType: "text"
  },
  {
    fieldName: "OrderDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "CardNumber",
    dataType: "text"
  },
  {
    fieldName: "Monetary",
    dataType: "text"
  },
  {
    fieldName: "StartDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "EndDate",
    dataType: "datetime",
    datetimeFormat: "yyyy-MM-dd",
    amText: "AM",
    pmText: "PM"
  },
  {
    fieldName: "ToMonth",
    dataType: "number"
  },
  {
    fieldName: "Month",
    dataType: "number"
  },
  {
    fieldName: "Year",
    dataType: "number"
  },
  {
    fieldName: "InterestRate",
    dataType: "number"
  },
  {
    fieldName: "SaveCost",
    dataType: "number"
  },
  {
    fieldName: "SaveMaturity",
    dataType: "number"
  },
  {
    fieldName: "CurrentSave",
    dataType: "number"
  }
];

const columns = [
  {
    name: "KorName",
    fieldName: "KorName",
    width: "100",
    header: {
      text: "Name",
      styleName: "orange-column"
    },
  },
  {
    name: "Gender",
    fieldName: "Gender",
    width: "40",
    header: {
      text: "Gender"
    }
  },
  {
    name: "Age",
    fieldName: "Age",
    width: "40",
    header: {
      text: "Age"
    }
  },
  {
    name: "Phone",
    fieldName: "Phone",
    width: "100",
    header: {
      text: "Phone"
    }
  },
  {
    name: "ProductId",
    fieldName: "ProductId",
    width: "120",
    header: {
      text: "Product ID"
    }
  },
  {
    name: "KorCountry",
    fieldName: "KorCountry",
    width: "100",
    header: {
      text: "Investment Country"
    }
  },
  {
    name: "OrderDate",
    fieldName: "OrderDate",
    width: "100",
    header: {
      text: "Order Date"
    }
  },
  {
    name: "CardNumber",
    fieldName: "CardNumber",
    width: "140",
    header: {
      text: "Card Number"
    }
  },
  {
    name: "Monetary",
    fieldName: "Monetary",
    width: "40",
    header: {
      text: "Currency"
    }
  },
  {
    name: "StartDate",
    fieldName: "StartDate",
    width: "100",
    header: {
      text: "First Payment Date"
    }
  },
  {
    name: "EndDate",
    fieldName: "EndDate",
    width: "100",
    header: {
      text: "End Date"
    }
  },
  {
    name: "ToMonth",
    fieldName: "ToMonth",
    width: "40",
    header: {
      text: "Payment Count"
    }
  },
  {
    name: "Month",
    fieldName: "Month",
    width: "40",
    header: {
      text: "Remaining Count"
    }
  },
  {
    name: "InterestRate",
    fieldName: "InterestRate",
    width: "40",
    numberFormat: "0.00",
    header: {
      text: "Interest Rate"
    }
  },
  {
    name: "SaveCost",
    fieldName: "SaveCost",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Payment Amount"
    }
  },
  {
    name: "SaveMaturity",
    fieldName: "SaveMaturity",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Maturity Amount"
    }
  },
  {
    name: "CurrentSave",
    fieldName: "CurrentSave",
    width: "80",
    numberFormat: "#,##0",
    header: {
      text: "Current Balance"
    }
  }
];

const menu = [
  {
    label: "This is menu1.",
    enabled: true,
    children: [
      {
        label: "This is submenu1."
      },
      {
        label: "This is submenu2."
      }
    ]
  },
  {
    label: "This is menu2",
    enabled: false
  },
  {
    label: "-"
  },
  {
    label: "This is menu3",
    type: "check",
    checked: true,
    tag: "check_menu"
  },
  {
    label: "group menu",
    children: [
      {
        label: "group1 - First",
        type: "radio",
        group: "group1",
        checked: true
      },
      {
        label: "group1 - Second",
        type: "radio",
        group: "group1"
      },
      {
        label: "group1 - Third",
        type: "radio",
        group: "group1"
      }
    ]
  }
];

const { gridView, dataProvider } = RealGrid.createGrid("realgrid", {
  columns,
  header: {
    height: 40
  },
  display: {
    rowHeight: 36,
    emptyMessage: "No data to display."
  },
  edit: {
    insertable: true,
    appendable: true
  },
  footer: {
    height: 40
  },
  stateBar: {
    width: 16
  },
  onInitialized: (grid) => {
    fetch('/data/en/simple_data.json')
      .then(response => response.json())
      .then(data => {
        grid.getDataSource().setRows(data);
      });
    
    grid.addPopupMenu("menu1", menu);
    grid.setColumnProperty("KorName", "popupMenu", "menu1");
    grid.setColumnProperty("KorName", "button", "popup");

    grid.onMenuItemClicked = function(g, data, index) {
      alert(data.label);
    };
  }
}, {
  fields
});

window.gridView = gridView;
window.dataProvider = dataProvider;

function btnHeaderPopup(){
  var menu = [{
    label: "This is menu1.",
    enabled: true,
    children: [{
     label: "This is submenu1.",
     callback:function(grid, index){console.log(index)}
    }, {
     label: "This is submenu2."
    }]
    }, {
     label: "This is menu2",
     enabled: false
   }];
   gridView.addPopupMenu("menu2", menu);
   
   gridView.setColumnProperty("KorName","header",{popupMenu:"menu2"});

   gridView.refresh();
}
```

```js
var menu = [{
  label: "menu1.",
  enabled: true,
  children: [{
   label: "This is submenu1.",
   callback:function(grid, index){console.log(index)}
  }, {
   label: "This is submenu2."
  }]
  }, {
   label: "This is menu2",
   enabled: false
}];
gridView.addPopupMenu("menu2", menu);

gridView.setColumnProperty("KorName","header",{popupMenu:"menu2"});
```