Popup Editors
Although FlexGrid provides efficient, Excel-style editing by default, you may want to customize the editing behavior.
This example shows how you can use the grid to display the data and a custom form to edit the items. The custom form is hosted in a C1 MVC Popup control and contains Wijmo input controls.
Click the pencil glyphs in the row headers to edit the item.
ID
Country
Sales
Expenses
0
US
2,880.43
3,698.86
1
Germany
1,518.27
3,812.97
2
UK
2,763.65
4,004.15
3
Japan
2,228.57
2,090.26
4
Sweden
1,150.57
3,022.01
5
Norway
9,318.13
94.55
6
Denmark
540.12
1,021.72
7
US
1,976.39
4,475.81
8
Germany
6,529.71
1,925.51
9
UK
6,355.27
965.83
10
Japan
3,806.71
118.77
11
Sweden
917.74
123.88
12
Norway
9,877.21
3,521.12
13
Denmark
2,510.28
1,240.13
14
US
9,898.28
2,317.08
15
Germany
8,880.09
4,892.26
16
UK
7,107.51
3,597.24
17
Japan
5,624.12
3,417.50
18
Sweden
8,773.20
1,151.78
19
Norway
5,117.80
699.81
20
Denmark
1,684.85
3,948.88
21
US
2,048.75
91.98
22
Germany
3,506.25
2,998.25
23
UK
9,575.34
552.71
24
Japan
8,504.16
2,824.23
25
Sweden
6,102.09
4,875.76
26
Norway
3,629.95
3,370.13
27
Denmark
126.39
3,211.29
28
US
9,969.70
3,864.17
29
Germany
6,820.47
4,469.19
30
UK
5,017.44
620.79
31
Japan
5,309.23
2,477.92
32
Sweden
3,021.70
2,940.31
33
Norway
5,642.32
896.93
34
Denmark
5,777.16
3,010.09
35
US
6,939.00
23.10
36
Germany
1,947.14
3,466.86
37
UK
6,997.36
3,762.90
38
Japan
6,616.70
2,525.61
39
Sweden
6,343.25
4,102.48
40
Norway
8,708.83
4,372.91
41
Denmark
5,679.20
4,991.75
42
US
5,067.86
2,587.02
43
Germany
4,833.28
3,460.38
44
UK
4,969.52
4,294.00
45
Japan
7,014.05
1,185.30
46
Sweden
7,782.38
4,718.04
47
Norway
7,940.56
3,315.21
48
Denmark
7,326.92
1,180.91
49
US
6,011.34
3,972.64
50
Germany
8,136.04
1,838.47
51
UK
6,931.47
3,639.37
52
Japan
7,281.70
3,308.12
53
Sweden
2,554.69
4,935.00
54
Norway
2,259.79
2,757.33
55
Denmark
2,354.15
3,869.58
56
US
5,876.78
4,596.86
57
Germany
6,238.10
129.70
58
UK
9,733.48
1,520.47
59
Japan
1,019.22
2,792.62
60
Sweden
7,747.49
2,394.61
61
Norway
1,425.31
4,700.43
62
Denmark
5,445.97
3,015.57
63
US
654.36
655.33
64
Germany
352.14
794.91
65
UK
9,817.45
1,620.22
66
Japan
5,321.84
768.04
67
Sweden
2,068.57
2,766.05
68
Norway
690.48
4,185.62
69
Denmark
553.54
1,188.13
70
US
4,953.48
4,917.29
71
Germany
4,684.45
4,792.26
72
UK
8,774.13
52.86
73
Japan
5,620.38
3,953.27
74
Sweden
99.78
1,594.11
75
Norway
503.85
692.63
76
Denmark
5,441.75
2,653.32
77
US
64.54
4,548.43
78
Germany
4,891.58
1,820.01
79
UK
5,837.39
4,035.72
80
Japan
7,394.98
4,375.79
81
Sweden
6,977.95
1,861.16
82
Norway
5,984.72
2,089.01
83
Denmark
3,697.51
4,705.88
84
US
9,795.48
1,897.61
85
Germany
9,387.26
2,975.33
86
UK
9,666.74
4,659.33
87
Japan
4,166.49
1,440.75
88
Sweden
1,065.16
252.13
89
Norway
9,761.27
2,865.62
90
Denmark
8,456.35
2,151.09
91
US
408.80
791.26
92
Germany
5,363.48
399.06
93
UK
6,483.31
1,152.61
94
Japan
8,396.09
3,963.21
95
Sweden
2,574.98
3,079.24
96
Norway
1,523.86
3,060.41
97
Denmark
6,115.80
746.15
98
US
6,708.39
2,102.02
99
Germany
826.05
1,043.09
ID
Country
Sales
Expenses
0
Edit Item
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 | // This file locates: "Scripts/Lesson/C1Input/PopupEditors.js". c1.documentReady(function () { // create some random data var countries = 'US,Germany,UK,Japan,Sweden,Norway,Denmark' .split( ',' ); var data = []; for (var i = 0; i < 100; i++) { data.push({ id: i, country: countries[i % countries.length], sales: Math.random() * 10000, expenses: Math.random() * 5000, overdue: (i + 1) % 4 == 0 }); } // the grid with custom editing behavior var theGrid = wijmo.Control.getControl( '#theGrid' ); theGrid.itemsSource = data; // add 'edit button' to row header cells theGrid.formatItem.addHandler(function (s, e) { if (e.panel == s.rowHeaders && e.col == 0) { e.cell.innerHTML = '<span class="wj-glyph-pencil"></span>' ; } }); // handle button clicks theGrid.addEventListener(theGrid.hostElement, 'click' , function (e) { var ht = theGrid.hitTest(e); if (ht.panel == theGrid.rowHeaders) { // prepare form var item = theGrid.rows[ht.row].dataItem; formControls.itemId.textContent = item.id; formControls.country.text = item.country; formControls.sales.value = item.sales; formControls.expenses.value = item.expenses; // show the form formControls.popup.show( true , function (e) { if (e.dialogResult == 'wj-hide-ok' ) { // commit changes if the user pressed the OK button theGrid.collectionView.editItem(item); item.country = formControls.country.text; item.sales = formControls.sales.value; item.expenses = formControls.expenses.value; theGrid.collectionView.commitEdit(); } // return focus to the grid theGrid.focus(); }); } }); // attach controls to input form var formControls = { popup: wijmo.Control.getControl( '#popup' ), itemId: document.getElementById( 'item-id' ), country: wijmo.Control.getControl( '#country' ), sales: wijmo.Control.getControl( '#sales' ), expenses: wijmo.Control.getControl( '#expenses' ), }; }); |
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 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 | // This file locates: "Content/css/Lesson/C1Input/PopupEditors.css". #popup label{ padding:0px; } #popup .btn{ margin-bottom:0px; } .wj-flexgrid { max-height: 200px; margin-bottom: 12px; } .modal-content { width: 400px; } /* style our custom 'edit buttons' */ .wj-rowheaders .wj-cell .wj-glyph-pencil { opacity: .3; transform: scale(.5); } .wj-rowheaders .wj-cell:hover .wj-glyph-pencil { opacity: 1; color: #000080; transform: scale(1); transition: all linear 300ms; } /* wj-labeled-input: adapted from MDL styles */ /* label input container */ .wj-labeled-input { position: relative; font-size: 16px; display: inline-block; box-sizing: border-box; width: 300px; max-width: 100%; margin: 0 20px; padding: 20px 0; } /* Wijmo control in the container */ .wj-labeled-input .wj-control.wj-content { margin: 0; width: 100%; background-color: transparent; border: none; border-bottom: 1px solid rgba(0,0,0,.1); } .wj-labeled-input .wj-control.wj-content button { opacity: 0.75; border-color: rgba(0,0,0,.1); } .wj-labeled-input .wj-input-group .wj-form-control { float : none; } /* label in the container (must come after the control) */ .wj-labeled-input label { font-size: 16px; top: 24px; bottom: 0; margin: 0; pointer-events: none; position: absolute; display: block; width: 100%; overflow: hidden; white-space: nowrap; text-align: left; color: rgba(0, 0, 0, 0.258824); transition-duration: .2s; transition-timing-function: cubic-bezier(.4,0,.2,1); } /* move label out of the way when control is focused or not empty */ .wj- static -labels .wj-labeled-input :not(.wj-state-focused) + label, .wj-labeled-input .wj-state-focused + label, .wj-labeled-input :not(.wj-state-empty) + label { font-size: 12px; top: 4px; color: rgb(63,81,181); visibility: visible; } .wj-labeled-input .wj-state-invalid + label { color: #d50000; } /* underline label */ .wj-labeled-input label:after { background-color: rgb(63,81,181); bottom: 20px; content: '' ; height: 2px; left: 45%; position: absolute; transition-duration: .2s; transition-timing-function: cubic-bezier(.4,0,.2,1); visibility: hidden; width: 10px; } /* show underline when focused */ .wj-labeled-input .wj-state-focused + label:after { left: 0; visibility: visible; width: 100%; } .wj-labeled-input .wj-state-invalid + label:after { background-color: #d50000; } /* validation message */ .wj-labeled-input .wj-error { color: #d50000; position: absolute; font-size: 12px; margin-top: 3px; visibility: hidden; display: block; } .wj-labeled-input .wj-control.wj-state-invalid ~ .wj-error { visibility: visible; } |
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: PopupEditors public ActionResult PopupEditors() { 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 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 | @ { var countries = new [] { "US" , "Germany" , "UK" , "Japan" , "Sweden" , "Norway" , "Denmark" }; var coutriesMap = new object [countries.Length]; for (var i = 0; i < countries.Length ; i++) { coutriesMap[i] = new KeyValuePair< int , string >(i, countries[i]); } } < h1 > @Html .Raw(Resources.C1Input.PopupEditors_Title) </ h1 > < p > @Html .Raw(Resources.C1Input.PopupEditors_Text1) </ p > < p > @Html .Raw(Resources.C1Input.PopupEditors_Text2) </ p > < p > @Html .Raw(Resources.C1Input.PopupEditors_Text3) </ p > @ (Html.C1().FlexGrid().Id( "theGrid" ) .IsReadOnly( true ) .AutoGenerateColumns( false ) .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.Row) .Columns(cols=> { cols.Add().Binding( "id" ).Header( "ID" ).Width( "50" ).IsReadOnly( true ); cols.Add().Binding( "country" ).Header( "Country" ).DataMap(dm=>dm.Bind(coutriesMap).DisplayMemberPath( "Value" ).SelectedValuePath( "Value" )); cols.Add().Binding( "sales" ).Header( "Sales" ).Format( "n2" ); cols.Add().Binding( "expenses" ).Header( "Expenses" ).Format( "n2" ); }) ) <!-- the popup editor --> < div id = "popup" class = "modal-content" > < div class = "modal-header" > < button type = "button" tabindex = "-1" class = "close wj-hide" > < span >×</ span > </ button > < h4 class = "modal-title" > @Html .Raw(Resources.C1Input.PopupEditors_Title1)< span id = "item-id" ></ span ></ h4 > </ div > < div class = "modal-body" > < div class = "wj-labeled-input" > < input id = "country" /> < label for = "country" > @Html .Raw(Resources.C1Input.PopupEditors_Text4)</ label > @Html .C1().ComboBox( "#country" ).Bind(countries).SelectedIndex(countries.Length-1) </ div > < div class = "wj-labeled-input" > < input id = "sales" /> < label for = "sales" > @Html .Raw(Resources.C1Input.PopupEditors_Text5)</ label > @Html .C1().InputNumber( "#sales" ).Format( "n2" ).Min(0).Step(100) </ div > < div class = "wj-labeled-input" > < input id = "expenses" /> < label for = "expenses" > @Html .Raw(Resources.C1Input.PopupEditors_Text6)</ label > @Html .C1().InputNumber( "#expenses" ).Format( "n2" ).Min(0).Step(100) </ div > < div class = "modal-footer" > < button type = "button" class = "btn btn-primary wj-hide-ok" > @Resources .Resource.Btn_Ok</ button > < button type = "button" class = "btn btn-default wj-hide" > @Resources .Resource.Btn_Cancel</ button > </ div > </ div > </ div > @Html .C1().Popup( "#popup" ) |