Menu Commands

The Menu control also supports MVVM-style commanding, which requires no event handlers at all.

To use the Menu control with commands, set the Menu's command property to an object with two methods:

canExecuteCommand: This method takes an argument that represents a parameter and returns a Boolean value indicating whether the command can be executed in the current application state.
executeCommand: This method takes an argument that represents a parameter and executes the command.

For example, the InputNumber below shows a tax value that can be edited directly or by using menu commands. Notice how some commands are automatically disabled depending on the current tax value:

Current Tax

Change Tax

// This file locates: "Scripts/Lesson/C1Input/MenusCommands.js".
c1.documentReady(function () {
    var currentTax = wijmo.Control.getControl('#currentTax');
    var changeTax = wijmo.Control.getControl('#changeTax');
 
    // set command object for the tax menu
    changeTax.command = {
        // execute the command
        executeCommand: function (arg) {
            arg = wijmo.changeType(arg, wijmo.DataType.Number);
            if (wijmo.isNumber(arg)) {
                currentTax.value += arg;
            }
        },
 
        // check if a command can be executed
        canExecuteCommand: function (arg) {
            arg = wijmo.changeType(arg, wijmo.DataType.Number);
            if (wijmo.isNumber(arg)) {
                var val = currentTax.value + arg;
                return val >= 0 && val <= 1;
            }
            return false;
        }
    };
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1InputController : Controller
    {
        // GET: MenusCommands
        public ActionResult MenusCommands()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1Input.MenusCommands_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Input.MenusCommands_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.MenusCommands_Text2)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1Input.MenusCommands_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1Input.MenusCommands_Text4)
    </li>
</ul>
<p>
    @Html.Raw(Resources.C1Input.MenusCommands_Text5)
</p>
 
<div class="demo-settings">
    <label for="currentTax">
        @Html.Raw(Resources.C1Input.MenusCommands_Text6)
    </label>
    @Html.C1().InputNumber().Id("currentTax").Format("p2").Min(0).Max(1).Step(0.025).Value(0.0825)
    <br>
    <label for="changeTax">
        @Html.Raw(Resources.C1Input.MenusCommands_Text7)
    </label>
    @(Html.C1().Menu().Id("changeTax")
        .Header(Resources.C1Input.MenusCommands_Text8)
        .MenuItems(items =>
        {
            items.Add(Resources.C1Input.MenusCommands_Text9, 0.5);
            items.Add(Resources.C1Input.MenusCommands_Text10, 0.25);
            items.Add(Resources.C1Input.MenusCommands_Text11, 0.05);
            items.AddSeparator();
            items.Add(Resources.C1Input.MenusCommands_Text12, -0.05);
            items.Add(Resources.C1Input.MenusCommands_Text13, -0.25);
            items.Add(Resources.C1Input.MenusCommands_Text14, -0.5);
        })
    )
</div>