Clear Buttons

This sample shows how you can add a "Clear" button to the input elements in C1 MVC input controls.

The "Clear" button allows users to clear the control using the mouse, which may be more convenient than pressing the Ctrl+A/Delete keys.

// This file locates: "Scripts/Lesson/C1Input/ClearButtons.js".
c1.documentReady(function () {
    var ctls = [];
    ctls.push(wijmo.Control.getControl('#theInputDate'));
    ctls.push(wijmo.Control.getControl('#theInputTime'));
    ctls.push(wijmo.Control.getControl('#theInputDateTime'));
    ctls.push(wijmo.Control.getControl('#theInputNumber'));
    ctls.push(wijmo.Control.getControl('#theComboBox'));
 
    // add clear button to all the controls
    ctls.forEach(function (ctl) {
        addClearButton(ctl)
    });
 
    var inputEvent = document.createEvent('HTMLEvents');
    inputEvent.initEvent('input', true, false);
 
    // add clear button to a C1 MVC input control
    function addClearButton(ctl) {
        var host = ctl.hostElement,
                input = ctl.inputElement;
        host.classList.add('wj-clear-input');
        host.addEventListener('click', function (e) {
            if (e.offsetX < 0 && !wijmo.closest(e.target, '.wj-state-empty')) {
                //e.preventDefault();
                e.stopImmediatePropagation();
                input.value = '';
                input.dispatchEvent(inputEvent);
                input.focus();
            }
        }, true);
    }
});

// This file locates: "Content/css/Lesson/C1Input/ClearButtons.css".
.wj-control {
  width: 250px;
  margin-bottom: 12px;
}
 
.wj-clear-input .wj-input-group input.wj-form-control {
  padding-right: 2em;
}
.wj-clear-input:not(.wj-state-empty) input + .wj-input-group-btn:focus {
  outline: none;
}
.wj-clear-input:not(.wj-state-empty):hover input +.wj-input-group-btn:after {
  content: '\00d7';
  position: absolute;
  font-weight: bold;
  width: 1.5em;
  left: -1.5em;
  top: 50%;
  transform: translateY(-50%);   
  padding: .5em;
  cursor: pointer;
  color: darkred;
}

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

<h1>
    @Html.Raw(Resources.C1Input.ClearButtons_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.ClearButtons_Text1)
</p>
<p>
    @Html.Raw(Resources.C1Input.ClearButtons_Text2)
</p>
 
@Html.C1().InputDate().Id("theInputDate").IsRequired(false)
<br>
@Html.C1().InputTime().Id("theInputTime").IsRequired(false)
<br>
@Html.C1().InputDateTime().Id("theInputDateTime").IsRequired(false)
<br>
@Html.C1().InputNumber().Id("theInputNumber").IsRequired(false).Step(1).Value(1234).Format("n2")
<br>
@Html.C1().ComboBox().Id("theComboBox").IsRequired(false).Bind(new[] { "apples", "oranges" })