# Menu with Input Number

## Content



You can add different types of values to the **Menu** control that are as simple as strings shown in the [Quick Start](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/Input/Menu/MenuQuickStart), or binding Menu with another control. This section describes how Menu control is used with [InputNumber](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/Input/InputNumber) and how is the Menu's value updated with respect to value selected in the [InputNumber](/componentone/docs/mvc/online-mvc-core/WorkingwithControls/Input/InputNumber) control.

The following image shows how the **Menu** appears after binding it to Input Number.

![](https://cdn.mescius.io/document-site-files/images/9b6a6cfe-b8e8-42e9-8a04-da6cb7762977/images/menufeature.png)

The following code examples demonstrate how to bind Menu to an InputNumber control:

**MenuController.cs**

```razor
public ActionResult Feature()
{
    return View();
}
```

**Menu.cshtml**

```html
<script>
function itemClicked(sender) {
    alert('You\'ve selected option ' + sender.selectedIndex + ' from the ' + sender.header + ' menu!');
}
function execute(arg) {
    var inputNumber = wijmo.Control.getControl("#mInputNumber");
    // convert argument to Number
        arg = wijmo.changeType(arg, wijmo.DataType.Number);
    // check if the conversion was successful
        if (wijmo.isNumber(arg)) {
        // update the value
            inputNumber.value += arg;
    }
}
function canExecute(arg) {
    var inputNumber = wijmo.Control.getControl("#mInputNumber");
    // convert argument to Number
        arg = wijmo.changeType(arg, wijmo.DataType.Number);
    // check if the conversion was successful
        if (wijmo.isNumber(arg)) {
        var val = inputNumber.value + arg;
        // check if the value is valid
            return val >= 0 && val <= 1;
    }
    return false;
}
</script>
<c1-menu header="Change Tax" execute-command="execute" can-execute-command="canExecute">
    <c1-menu-item header="+ 25%" command-parameter="0.25"></c1-menu-item>
    <c1-menu-item header="+ 10%" command-parameter="0.10"></c1-menu-item>
    <c1-menu-item header="+ 5%" command-parameter="0.05"></c1-menu-item>
    <c1-menu-item header="+ 1%" command-parameter="0.01"></c1-menu-item>
    <c1-menu-item is-separator=true></c1-menu-item>
    <c1-menu-item header="- 1%" command-parameter="-0.01"></c1-menu-item>
    <c1-menu-item header="- 5%" command-parameter="-0.05"></c1-menu-item>
    <c1-menu-item header="- 10%" command-parameter="-0.10"></c1-menu-item>
    <c1-menu-item header="- 25%" command-parameter="-0.25"></c1-menu-item>
</c1-menu>
<c1-input-number id="mInputNumber" value=0.07 step=0.05 format="p0" min=0 max=1></c1-input-number>
</div>
```