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
Italy
Widget
Green
4
0
3
2,012.78
670.97
-1,390.57
852.65
-4,487.03
0.00
1
2/25/2025
2/25/2025
Japan
Doohickey
White
3
3
1
4,916.56
252.01
4,520.83
2,694.99
2,388.88
0.06
2
3/25/2025
3/25/2025
Germany
Sprocket
Red
1
1
2
-2,376.71
1,602.79
3,828.66
-438.98
-4,071.81
0.13
3
4/25/2025
4/25/2025
Japan
Gadget
Red
3
2
2
3,032.87
-2,721.92
1,320.30
870.60
3,536.50
0.10
4
5/25/2025
5/25/2025
Italy
Widget
White
4
0
1
-3,050.33
4,089.50
-2,325.24
-3,697.24
1,947.53
0.02
5
6/25/2025
6/25/2025
Germany
Gadget
Blue
1
2
4
4,806.12
363.98
-4,093.86
3,155.96
-3,744.40
0.13
6
7/25/2025
7/25/2025
Japan
Gadget
White
3
2
1
1,617.70
2,542.15
4,433.46
-2,901.27
-2,014.21
0.01
7
8/25/2025
8/25/2025
UK
Gadget
Red
2
2
2
3,823.76
-4,184.71
570.42
-1,636.40
-741.99
0.15
8
9/25/2025
9/25/2025
Germany
Doohickey
Blue
1
3
4
1,606.01
-1,521.86
4,801.69
4,662.93
-2,311.58
0.16
9
10/25/2025
10/25/2025
Greece
Gadget
Red
5
2
2
-4,832.10
-502.45
-4,785.57
3,913.88
-320.48
0.11
10
11/25/2025
11/25/2025
US
Widget
Red
0
0
2
-3,739.12
4,625.83
1,662.17
-2,026.48
-1,679.71
0.13
11
12/25/2025
12/25/2025
UK
Widget
Blue
2
0
4
2,261.89
-3,935.37
-16.33
-280.26
-2,915.57
0.18
12
1/25/2025
1/25/2025
Japan
Sprocket
Black
3
1
0
-1,988.79
911.22
4,710.42
-3,425.31
-460.95
0.01
13
2/25/2025
2/25/2025
UK
Sprocket
Black
2
1
0
3,624.93
-1,649.64
144.16
-4,517.85
787.83
0.10
14
3/25/2025
3/25/2025
US
Sprocket
Black
0
1
0
2,024.86
-4,031.27
4,052.43
-2,286.50
-43.81
0.07

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>