Custom Glyphs
Many C1 MVC controls include small images called 'glyphs'. For example, the ComboBox uses a glyph in the button used to show the item list. The FlexGrid uses glyphs to show various state indicators, including sort, editing, expanded/collapsed nodes, etc.
All glyphs used in C1 MVC controls are CSS-based, which means you can override them on all or specific controls using CSS rules and no code.
This example shows how you can replace the FlexGrid glyphs with Bootstrap icons and with regular images.
Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
Country: US (34 items)
Product: Phones (17 items)
0
US
Phones
145,248
81,732.54
38,401.13
12
US
Phones
6,078
38,100.45
17,157.09
24
US
Phones
130,441
71,972.60
40,473.13
36
US
Phones
135,701
9,397.80
7,454.87
48
US
Phones
123,081
83,056.79
34,256.33
60
US
Phones
3,969
38,883.79
40,802.24
72
US
Phones
52,332
31,036.32
12,106.80
84
US
Phones
146,559
10,192.39
41,991.36
96
US
Phones
126,837
55,323.41
15,730.50
108
US
Phones
58,864
83,975.43
41,160.53
120
US
Phones
123,090
58,889.16
45,403.49
Id
Country
Product
Active
Downloads
Sales
Expenses
Overdue
0
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | // This file locates: "Content/css/Lesson/C1Mvc/CustomGlyphs.css"./* use Bootstrap icons for sorting/grouping glyphs */.wj-flexgrid .wj-colheaders .wj-glyph-up,.wj-flexgrid .wj-colheaders .wj-glyph-down,.wj-flexgrid .wj-group .wj-glyph-right,.wj-flexgrid .wj-group .wj-glyph-down-right,.wj-flexgrid .wj-rowheaders .wj-glyph-pencil { position: relative; top: 1px; display: inline-block; font-family: 'Glyphicons Halflings'; font-style: normal; border: none; font-weight: 400; line-height: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}.wj-flexgrid .wj-group .wj-glyph-right:after,.wj-flexgrid .wj-group .wj-glyph-down-right:after { content: "\e080";}.wj-flexgrid .wj-group .wj-glyph-down-right { transform: rotate(90deg);}.wj-flexgrid .wj-colheaders .wj-glyph-up:after { content: "\e151"; color: #800000;}.wj-flexgrid .wj-colheaders .wj-glyph-down:after { content: "\e152"; color: #800000;}.wj-flexgrid .wj-rowheaders .wj-glyph-pencil:after { content: "\270f"; color: #000080;} /* use a custom image for filter glyphs */.wj-flexgrid .wj-colheaders .wj-glyph-filter { background-image:url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAzElEQVQ4je3OqwrCYByG8TctWCwmEQ0GURC8gjXDLmIDD80m3skGFhGbpyYIFosYTIJ6GR6aaHsMYxqmoq76wj99PD8+uRXRrgnPEa792XmOaNeFWxWyTfHrbFNIko9cLTg2YF8GBAfBRrAUTA3oZKCbhkES+oVHHOyOHFpwLsFFsBUsYjBJQq8I49zzOITsm/4vdoJ5HEZZGObfxyHkasFaMEtAv/BZHEJWBkxS38XBPEdwEqwMPOfL+A/4s82IwB2JAgRIJCBAXr3dAEN0JFBLhgDhAAAAAElFTkSuQmCC'); background-repeat: no-repeat; background-position: bottom right; margin-top: 4px; width: 1em; height: 1em; border: none;}.wj-flexgrid .wj-colheaders .wj-glyph-filter:after { display: none;}.wj-filter-off .wj-glyph-filter { opacity: .5;}/* make active filter images 25% larger */.wj-flexgrid .wj-colheaders .wj-filter-on .wj-glyph-filter { transform: scale(1.25)} |
1 2 3 4 5 6 7 8 9 10 11 12 13 | using System.Web.Mvc;namespace LearnMvcClient.Controllers{ public partial class C1MvcController : Controller { // GET: CustomGlyphs public ActionResult CustomGlyphs() { return View(Models.FlexGridData.GetSales(200)); } }} |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | @model IEnumerable<FlexGridData.Sale><h1> @Html.Raw(Resources.C1Mvc.CustomGlyphs_Title)</h1><p> @Html.Raw(Resources.C1Mvc.CustomGlyphs_Text1)</p><p> @Html.Raw(Resources.C1Mvc.CustomGlyphs_Text2)</p><p> @Html.Raw(Resources.C1Mvc.CustomGlyphs_Text3)</p>@(Html.C1().FlexGrid<FlexGridData.Sale>().Id("theGrid").Height(250) .Bind(Model) .GroupBy("Country", "Product") .Filterable()) |