ComboBox as Color Input
If you want users to select from a short set of well-known colors, the ComboBox may be a better choice than an InputColor control.
You can set the itemsSource property to an array containing the colors, and use the formatItem to show a preview of the colors on the drop-down list:
- C1Input/ComboBoxColors.js
- C1Input/ComboBoxColors.css
- ComboBoxColorsController.cs
- ComboBoxColors.cshtml
1 2 3 4 5 6 7 8 9 10 11 12 | // This file locates: "Scripts/Lesson/C1Input/ComboBoxColors.js". c1.documentReady(function () { var theComboBox = wijmo.Control.getControl( '#theComboBox' ); theComboBox.textChanged.addHandler(function (s, e) { document.getElementById( 'theColor' ).style.background = s.text; }); theComboBox.formatItem.addHandler(function (s, e) { var template = '<span class="colorthumb" style="background:{data}"> </span> {data}' ; e.item.innerHTML = wijmo.format(template, e); }); theComboBox.itemsSource = 'Aqua,Azure,Black,Blue,Brown,Chartreuse,Chocolate,Coral,Crimson,Cyan,Fuchsia,Gold,Gray,Green,Khaki,Lavender,Lime,Navy,Olive,Orange,Orchid,Pink,Plum,Purple,Red,Silver,Tan,Turquoise,Violet,White,Yellow' .split( ',' ); }); |
1 2 3 4 5 6 | // This file locates: "Content/css/Lesson/C1Input/ComboBoxColors.css". .colorthumb { box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23); margin-right: 6px; padding: 0 2px; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc; namespace LearnMvcClient.Controllers { public partial class C1InputController : Controller { // GET: ComboBoxColors public ActionResult ComboBoxColors() { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 | < h1 > @Html .Raw(Resources.C1Input.ComboBoxColors_Title) </ h1 > < p > @Html .Raw(Resources.C1Input.ComboBoxColors_Text1) </ p > < p > @Html .Raw(Resources.C1Input.ComboBoxColors_Text2) </ p > @Html .C1().ComboBox().Id( "theComboBox" ) < span id = "theColor" class = "colorthumb" > </ span > |