Popup Column Picker
You can easily implement a column-picker UI by using the grid's columns property, a ListBox control, and C1 MVC's showPopup and hidePopup methods.
For example, the grid below loads with an auto-generated set of columns. Click the gear icon at the top-left cell to show a ListBox where you can select the columns you want to display.
Id
Start
End
Country
Product
Color
Country Id
Product Id
Color Id
Amount1
Amount2
Amount3
Amount4
Amount5
Discount
Active
0
1/25/2025
1/25/2025
UK
Widget
Green
2
0
3
-4,851.24
-184.40
-2,197.24
-376.71
1,432.88
0.18
1
2/25/2025
2/25/2025
Greece
Sprocket
Blue
5
1
4
357.92
-1,917.46
1,648.01
-1,595.99
-4,122.66
0.17
2
3/25/2025
3/25/2025
Greece
Gadget
Green
5
2
3
3,574.78
-2,562.58
-576.93
1,521.84
2,262.33
0.22
3
4/25/2025
4/25/2025
Germany
Sprocket
Black
1
1
0
-4,343.50
-3,778.32
1,781.64
-3,854.34
-868.56
0.16
4
5/25/2025
5/25/2025
UK
Sprocket
White
2
1
1
2,196.05
2,819.80
3,809.57
-4,151.36
2,810.34
0.14
5
6/25/2025
6/25/2025
Japan
Gadget
White
3
2
1
475.73
-2,613.76
-2,823.34
-3,763.31
4,824.06
0.19
6
7/25/2025
7/25/2025
Italy
Sprocket
Black
4
1
0
108.49
-3,267.22
-2,205.53
4,920.57
4,782.89
0.16
7
8/25/2025
8/25/2025
Germany
Sprocket
Blue
1
1
4
4,931.70
4,165.84
4,070.12
-1,936.41
-971.44
0.09
8
9/25/2025
9/25/2025
Italy
Doohickey
White
4
3
1
3,788.36
-3,075.22
-2,985.50
1,399.54
-4,970.15
0.08
9
10/25/2025
10/25/2025
US
Doohickey
White
0
3
1
3,728.52
-1,092.07
-2,479.28
-3,148.48
-1,074.95
0.04
10
11/25/2025
11/25/2025
Japan
Widget
Red
3
0
2
1,847.91
1,544.55
-4,688.64
1,722.25
4,108.21
0.05
11
12/25/2025
12/25/2025
Italy
Doohickey
Black
4
3
0
1,958.82
-2,914.50
-1,715.73
-2,688.56
1,027.66
0.17
12
1/25/2025
1/25/2025
Japan
Doohickey
Red
3
3
2
2,959.49
-390.95
621.30
396.58
3,882.77
0.09
13
2/25/2025
2/25/2025
Germany
Doohickey
Blue
1
3
4
-3,184.61
291.76
957.87
431.72
-2,961.51
0.20
14
3/25/2025
3/25/2025
Germany
Sprocket
Green
1
1
3
-4,322.41
-2,355.12
3,192.65
-3,354.73
4,379.66
0.19
Id
Start
End
Country
Product
Color
Country Id
Product Id
Color Id
Amount1
Amount2
Amount3
Amount4
Amount5
Discount
Active
0
You can use the grid's columnLayout property to allow users to save and restore column layouts. Click the buttons below to see how this works.
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 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | // This file locates: "Scripts/Lesson/C1Mvc/WijmoShowPopup.js". c1.documentReady(function () { // generate some random data var data = [], countries = [ 'US' , 'Germany' , 'UK' , 'Japan' , 'Italy' , 'Greece' ], products = [ 'Widget' , 'Sprocket' , 'Gadget' , 'Doohickey' ], colors = [ 'Black' , 'White' , 'Red' , 'Green' , 'Blue' ], dt = new Date(); for (var i = 0; i < 100; i++) { var date = new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60), countryId = Math.floor(Math.random() * countries.length), productId = Math.floor(Math.random() * products.length), colorId = Math.floor(Math.random() * colors.length); var item = { id: i, start: date, end: date, country: countries[countryId], product: products[productId], color: colors[colorId], countryId: countryId, productId: productId, colorId: colorId, amount1: Math.random() * 10000 - 5000, amount2: Math.random() * 10000 - 5000, amount3: Math.random() * 10000 - 5000, amount4: Math.random() * 10000 - 5000, amount5: Math.random() * 10000 - 5000, discount: Math.random() / 4, active: i % 4 == 0 }; data.push(item); } var theGrid = wijmo.Control.getControl( '#theGrid' ); theGrid.itemsSource = data; theGrid.formatItem.addHandler(function (s, e) { if (e.panel == s.topLeftCells) { e.cell.innerHTML = '<span class="column-picker-icon glyphicon glyphicon-cog"></span>' ; } }); var theColumnPicker = wijmo.Control.getControl( '#theColumnPicker' ); theColumnPicker.initialize({ itemsSource: theGrid.columns, checkedMemberPath: 'visible' , displayMemberPath: 'header' , lostFocus: function () { wijmo.hidePopup(theColumnPicker.hostElement); } }); // show the column picker when the user clicks the top-left cell var ref = theGrid.hostElement.querySelector( '.wj-topleft' ); ref .addEventListener( 'mousedown' , function (e) { if (wijmo.hasClass(e.target, 'column-picker-icon' )) { wijmo.showPopup(theColumnPicker.hostElement, ref , false , true , false ); theColumnPicker.focus(); e.preventDefault(); } }); // save/restore layout buttons document.getElementById( 'btnSave' ).addEventListener( 'click' , function () { localStorage.setItem( 'myLayout' , theGrid.columnLayout); }); document.getElementById( 'btnRestore' ).addEventListener( 'click' , function () { var layout = localStorage.getItem( 'myLayout' ); if (layout) { theGrid.columnLayout = layout; } }); }); |
1 2 3 4 5 6 7 8 9 10 11 12 13 | // This file locates: "Content/css/Lesson/C1Mvc/WijmoShowPopup.css". .column-picker { columns: 3; padding: 12px; margin-left: 12px; margin-top: 26px; box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); } .column-picker-icon { cursor: pointer; color: #FF8754; margin: 3px; } |
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: WijmoShowPopup public ActionResult WijmoShowPopup() { return View(); } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | < h1 > @Html .Raw(Resources.C1Mvc.WijmoShowPopup_Title) </ h1 > < p > @Html .Raw(Resources.C1Mvc.WijmoShowPopup_Text1) </ p > < p > @Html .Raw(Resources.C1Mvc.WijmoShowPopup_Text2) </ p > @Html .C1().FlexGrid().Id( "theGrid" ).Height(300) < div style = "display:none" > @Html .C1().ListBox().Id( "theColumnPicker" ).CssClass( "column-picker" ) </ div > < p > @Html .Raw(Resources.C1Mvc.WijmoShowPopup_Text3) </ p > < button id = "btnSave" class = "btn btn-default" > @Html .Raw(Resources.C1Mvc.WijmoShowPopup_Text4) </ button > < button id = "btnRestore" class = "btn btn-default" > @Html .Raw(Resources.C1Mvc.WijmoShowPopup_Text5) </ button > |