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.

Country

Sales

Expenses

1,318.55

948.24

Germany

3,810.33

4,530.43

491.48

3,834.61

Japan

874.50

3,813.24

Sweden

57.74

2,387.17

Norway

7,151.76

403.64

Denmark

8,034.98

2,994.95

5,334.43

25.75

Germany

3,386.80

3,509.84

5,202.74

673.75

Japan

1,660.68

3,518.06

Sweden

3,710.12

3,887.68

Norway

7,953.48

1,690.22

Denmark

5,056.33

3,743.36

3,066.48

2,030.10

Germany

9,467.30

3,072.89

770.28

1,106.36

Japan

3,527.45

806.88

Sweden

8,761.83

781.93

Norway

2,288.72

2,892.90

Denmark

50.63

2,441.59

6,901.46

317.45

Germany

6,098.35

2,838.82

5,208.37

4,191.48

Japan

6,270.26

4,603.50

Sweden

5,762.99

3,999.51

Norway

677.44

4,530.38

Denmark

4,200.31

3,153.53

970.79

1,586.30

Germany

5,607.75

2,775.37

1,113.97

2,443.96

Japan

4,747.96

4,101.21

Sweden

2,564.61

170.69

Norway

7,957.96

2,882.78

Denmark

6,651.62

4,715.78

7,859.30

2,058.57

Germany

1,422.60

125.31

3,243.50

3,667.04

Japan

2,692.98

488.27

Sweden

6,963.21

2,031.55

Norway

1,348.82

3,082.58

Denmark

8,981.15

360.94

8,846.99

4,023.02

Germany

4,515.46

1,249.32

8,782.46

1,873.74

Japan

6,315.85

3,524.93

Sweden

1,350.46

1,694.81

Norway

586.86

4,606.18

Denmark

5,760.43

2,040.32

6,461.44

3,592.06

Germany

80.85

3,330.32

3,476.65

1,940.00

Japan

6,603.89

3,120.49

Sweden

4,484.69

3,000.69

Norway

6,929.58

1,635.23

Denmark

1,609.69

3,102.80

9,435.76

3,990.28

Germany

9,035.82

4,117.07

7,499.16

2,815.27

Japan

9,564.53

2,019.05

Sweden

7,418.77

1,686.18

Norway

6,321.78

144.68

Denmark

4,875.85

1,217.22

9,852.23

2,598.92

Germany

9,168.27

4,182.78

658.79

4,533.35

Japan

6,868.01

3,579.12

Sweden

7,454.43

4,704.39

Norway

1,088.98

3,189.33

Denmark

9,172.08

3,065.13

5,121.35

3,645.71

Germany

5,699.69

4,426.84

2,121.29

2,393.73

Japan

5,295.52

2,385.53

Sweden

3,433.34

800.17

Norway

9,303.10

4,395.33

Denmark

7,185.07

4,046.92

4,676.96

2,141.28

Germany

524.18

1,049.81

9,894.39

4,855.62

Japan

8,419.94

4,388.06

Sweden

4,736.02

2,646.11

Norway

4,501.49

3,251.86

Denmark

3,769.22

1,190.02

1,386.28

4,445.90

Germany

3,429.24

2,573.33

7,820.69

223.48

Japan

8,668.90

4,115.22

Sweden

3,766.16

4,962.37

Norway

1,629.14

4,135.53

Denmark

6,294.43

2,832.57

9,679.52

1,075.29

Germany

9,765.01

2,898.66

7,764.74

1,701.95

Japan

4,271.39

3,148.74

Sweden

6,423.80

4,048.78

Norway

9,983.25

3,503.81

Denmark

2,633.81

2,352.46

5,594.24

751.24

Germany

5,325.57

3,757.30

// 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'),
    };
});

// 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;
    }

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

@{ 
    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>&times;</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")

Popup Editors

Edit Item