Split Buttons allow users to select a value by clicking a primary button, or select from a list of mutually exclusive values displayed in a drop-down list.

To use C1 MVC Menu controls as split buttons, all you have to do is set the isButton property to true. Once you do that, clicking the menu header will raise the itemClicked event instead of showing the drop-down list.

// This file locates: "Scripts/Lesson/C1Input/MenusSplitButtons.js".
c1.documentReady(function () {
    var theSplitButton = wijmo.Control.getControl('#theSplitButton');
 
    // item clicked fires when you select an option or click the header
    theSplitButton.isButton = true;
    theSplitButton.itemClicked.addHandler(function (s, e) {
        alert('Running ' + s.selectedValue);
    });
 
    // update header to show current selection
    theSplitButton.selectedIndexChanged.addHandler(function (s, e) {
        if (s.selectedIndex > -1) {
            s.header = wijmo.format('Run: <b>{header}</b>', s.selectedItem);
        }
    });
 
    // populate menu after hooking up the selectedIndexChanged event
    theSplitButton.displayMemberPath = 'header';
    theSplitButton.selectedValuePath = 'value';
    theSplitButton.itemsSource = [
      { header: 'Internet Explorer', value: 'IE' },
      { header: 'Chrome', value: 'CHR' },
      { header: 'Firefox', value: 'FFX' },
      { header: 'Safari', value: 'IOS' },
      { header: 'Opera', value: 'OPR' },
    ];
 
    // initialize value
    theSplitButton.selectedValue = 'FFX';
});

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

<h1>
    @Html.Raw(Resources.C1Input.MenusSplitButtons_Title)
</h1>
<p>
    @Html.Raw(Resources.C1Input.MenusSplitButtons_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.MenusSplitButtons_Text2)
</p>
 
@Html.C1().Menu().Id("theSplitButton").DisplayMemberPath("header").SelectedValuePath("value")