// This file locates: "Scripts/Lesson/C1Input/ListBoxFormatItem.js".
c1.documentReady(function () {
    var theListBox = wijmo.Control.getControl('#theListBox');
 
    // Wijmo glyphs
    var glyphs = 'asterisk,calendar,check,circle,clock,diamond,down,' +
    'down-left,down-right,file,filter,left,minus,pencil,plus,right,' +
    'square,step-backward,step-forward,up,up-left,up-right';
 
    theListBox.formatItem.addHandler(function (s, e) {
        e.item.innerHTML = '<div class="wj-glyph">' +
        '<span class="wj-glyph-' + e.data + '"></span>' +
        '</div>' +
        e.data;
    });
 
    theListBox.selectedIndexChanged.addHandler(function (s, e) {
        document.getElementById('selectedItem').innerHTML =
       '<span class="wj-glyph-' + s.selectedItem + '"></span>';
    });
 
    theListBox.itemsSource = glyphs.split(',');
});

// This file locates: "Content/css/Lesson/C1Input/ListBoxFormatItem.css".
.wj-listbox {
  max-height: 150px;
}
.wj-listbox .wj-glyph {
  display: inline-block;
  width: 2em;
  text-align: center;
}
.wj-listbox .wj-listbox-item:not(.wj-state-selected) .wj-glyph {
  color: navy;
}

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

<h1>
    @Html.Raw(Resources.C1Input.ListBoxFormatItem_Title)
</h1>
 
<p>
    @Html.Raw(Resources.C1Input.ListBoxFormatItem_Text1)
</p>
<div class="row demo-settings">
    <div class="col-xs-4">
        @(Html.C1().ListBox().Id("theListBox"))
    </div>
    <div class="col-xs-8">
        <h1 id="selectedItem"></h1>
    </div>
</div>