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:

   
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}">&nbsp;&nbsp;&nbsp;</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">&nbsp;&nbsp;&nbsp;</span>