Custom Editors

Although FlexGrid provides efficient, Excel-style editing by default, you may want to customize the editing behavior.

This example defines a CustomGridEditor class that allows any Wijmo control to be used as a grid editor:

Date

Time

Country

Product

Amount

1/25/2025

12:00 AM

Germany

Gadget

2,157.73

2/25/2025

1:01 AM

Germany

Gadget

-192.74

3/25/2025

2:02 AM

Italy

Widget

-4,609.29

4/25/2025

3:03 AM

Italy

Widget

-540.45

5/25/2025

4:04 AM

Italy

Gadget

-2,811.21

6/25/2025

5:05 AM

Germany

Doohickey

2,987.86

7/25/2025

6:06 AM

Italy

Doohickey

3,713.49

8/25/2025

7:07 AM

Greece

Widget

-2,739.37

9/25/2025

8:08 AM

Italy

Gadget

-4,776.52

10/25/2025

9:09 AM

Japan

Widget

1,193.70

11/25/2025

10:10 AM

Greece

Gadget

-1,784.42

12/25/2025

11:11 AM

Germany

Gadget

-807.94

1/25/2025

12:12 PM

Widget

171.01

2/25/2025

1:13 PM

Greece

Doohickey

846.08

3/25/2025

2:14 PM

Doohickey

-4,926.17

4/25/2025

3:15 PM

Greece

Widget

3,241.86

5/25/2025

4:16 PM

Greece

Gadget

872.03

6/25/2025

5:17 PM

Greece

Gadget

813.96

7/25/2025

6:18 PM

Doohickey

-730.23

8/25/2025

7:19 PM

Italy

Gadget

-3,026.26

9/25/2025

8:20 PM

Greece

Doohickey

593.23

10/25/2025

9:21 PM

Italy

Gadget

4,806.72

11/25/2025

10:22 PM

Japan

Widget

2,476.75

12/25/2025

11:23 PM

Gadget

1,529.08

1/25/2025

12:24 AM

Germany

Doohickey

4,986.02

2/25/2025

1:25 AM

Widget

2,926.64

3/25/2025

2:26 AM

Italy

Gadget

4,942.59

4/25/2025

3:27 AM

Italy

Widget

-1,060.53

5/25/2025

4:28 AM

Italy

Widget

824.39

6/25/2025

5:29 AM

Greece

Doohickey

-3,077.55

7/25/2025

6:30 AM

Italy

Gadget

2,579.67

8/25/2025

7:31 AM

Gadget

-1,331.18

9/25/2025

8:32 AM

Greece

Doohickey

2,548.88

10/25/2025

9:33 AM

Italy

Gadget

-4,033.63

11/25/2025

10:34 AM

Greece

Widget

682.16

12/25/2025

11:35 AM

Germany

Gadget

3,707.05

1/25/2025

12:36 PM

Doohickey

1,414.63

2/25/2025

1:37 PM

Japan

Widget

1,490.34

3/25/2025

2:38 PM

Doohickey

-2,113.99

4/25/2025

3:39 PM

Gadget

-3,755.44

5/25/2025

4:40 PM

Widget

3,743.32

6/25/2025

5:41 PM

Japan

Widget

1,869.11

7/25/2025

6:42 PM

Germany

Doohickey

-0.83

8/25/2025

7:43 PM

Widget

4,188.82

9/25/2025

8:44 PM

Greece

Widget

-805.55

10/25/2025

9:45 PM

Widget

-2,756.55

11/25/2025

10:46 PM

Widget

-718.63

12/25/2025

11:47 PM

Italy

Gadget

4,150.14

1/25/2025

12:48 AM

Greece

Gadget

474.40

2/25/2025

1:49 AM

Widget

-2,688.64

3/25/2025

2:50 AM

Japan

Gadget

-4,236.17

4/25/2025

3:51 AM

Greece

Doohickey

432.28

5/25/2025

4:52 AM

Germany

Gadget

3,053.47

6/25/2025

5:53 AM

Germany

Widget

3,289.04

7/25/2025

6:54 AM

Greece

Gadget

-1,799.09

8/25/2025

7:55 AM

Italy

Gadget

-2,376.15

9/25/2025

8:56 AM

Germany

Doohickey

3,300.70

10/25/2025

9:57 AM

Doohickey

3,071.67

11/25/2025

10:58 AM

Gadget

-2,388.73

12/25/2025

11:59 AM

Greece

Gadget

3,969.78

1/25/2025

12:00 PM

Gadget

4,436.94

2/25/2025

1:01 PM

Japan

Gadget

-3,620.64

3/25/2025

2:02 PM

Gadget

-728.71

4/25/2025

3:03 PM

Japan

Widget

2,167.08

5/25/2025

4:04 PM

Italy

Doohickey

495.66

6/25/2025

5:05 PM

Gadget

4,307.53

7/25/2025

6:06 PM

Greece

Widget

-3,574.29

8/25/2025

7:07 PM

Doohickey

3,686.91

9/25/2025

8:08 PM

Doohickey

-228.07

10/25/2025

9:09 PM

Italy

Gadget

-625.86

11/25/2025

10:10 PM

Gadget

-4,000.43

12/25/2025

11:11 PM

Japan

Doohickey

1,921.84

1/25/2025

12:12 AM

Widget

-262.76

2/25/2025

1:13 AM

Germany

Gadget

4,951.98

3/25/2025

2:14 AM

Germany

Doohickey

-1,058.00

4/25/2025

3:15 AM

Japan

Doohickey

-1,926.24

5/25/2025

4:16 AM

Gadget

2,090.33

6/25/2025

5:17 AM

Germany

Gadget

-1,505.16

7/25/2025

6:18 AM

Greece

Doohickey

-3,663.22

8/25/2025

7:19 AM

Italy

Widget

1,729.71

9/25/2025

8:20 AM

Italy

Doohickey

-4,476.58

10/25/2025

9:21 AM

Japan

Widget

-4,485.46

11/25/2025

10:22 AM

Japan

Doohickey

-441.99

12/25/2025

11:23 AM

Italy

Widget

-4,524.64

1/25/2025

12:24 PM

Greece

Doohickey

-2,932.15

2/25/2025

1:25 PM

Doohickey

-1,286.20

3/25/2025

2:26 PM

Italy

Widget

-299.93

4/25/2025

3:27 PM

Germany

Widget

396.75

5/25/2025

4:28 PM

Greece

Doohickey

-4,189.21

6/25/2025

5:29 PM

Japan

Doohickey

4,209.52

7/25/2025

6:30 PM

Gadget

3,639.01

8/25/2025

7:31 PM

Greece

Widget

-3,664.78

9/25/2025

8:32 PM

Japan

Doohickey

3,907.40

10/25/2025

9:33 PM

Gadget

4,923.48

11/25/2025

10:34 PM

Japan

Doohickey

-706.36

12/25/2025

11:35 PM

Italy

Gadget

2,292.36

1/25/2025

12:36 AM

Greece

Gadget

-3,869.26

2/25/2025

1:37 AM

Gadget

3,086.96

3/25/2025

2:38 AM

Widget

2,278.58

4/25/2025

3:39 AM

Doohickey

2,107.86

// This file locates: "Scripts/Lesson/C1FlexGrid/CustomEditors.js".
c1.documentReady(function () {
    // create some random data
    var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(',');
    var products = [
        { id: 0, name: 'Widget', unitPrice: 23.43 },
        { id: 1, name: 'Gadget', unitPrice: 12.33 },
        { id: 2, name: 'Doohickey', unitPrice: 53.07 },
    ];
    var data = [];
    var dt = new Date();
    for (var i = 0; i < 100; i++) {
        data.push({
            id: i,
            date: new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
            time: new Date(dt.getFullYear(), i % 12, 25, i % 24, i % 60, i % 60),
            country: countries[Math.floor(Math.random() * countries.length)],
            product: products[Math.floor(Math.random() * products.length)].name,
            amount: Math.random() * 10000 - 5000,
            discount: Math.random() / 4
        });
    }
 
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.itemsSource = data;
 
    // add custom editors to the grid
    new CustomGridEditor(theGrid, 'date', wijmo.input.InputDate, {
        format: 'd'
    });
    new CustomGridEditor(theGrid, 'time', wijmo.input.InputTime, {
        format: 't',
        min: new Date(2000, 1, 1, 7, 0),
        max: new Date(2000, 1, 1, 22, 0),
        step: 30
    });
    new CustomGridEditor(theGrid, 'country', wijmo.input.ComboBox, {
        itemsSource: countries
    });
    new CustomGridEditor(theGrid, 'amount', wijmo.input.InputNumber, {
        format: 'n2',
        step: 10
    });
 
    // create an editor based on a ComboBox
    var multiColumnEditor = new CustomGridEditor(theGrid, 'product', wijmo.input.ComboBox, {
        headerPath: 'name',
        displayMemberPath: 'name',
        itemsSource: products
    });
 
    // customize the ComboBox to show multiple columns
    var combo = multiColumnEditor.control;
    combo.listBox.formatItem.addHandler(function (s, e) {
        e.item.innerHTML = '<table><tr>' +
            '<td style="width:30px;text-align:right;padding-right:6px">' + e.data.id + '</td>' +
            '<td style="width:100px;padding-right:6px"><b>' + e.data.name + '</b></td>' +
            '<td style="width:80px;text-align:right;padding-right:6px">' +
                wijmo.Globalize.format(e.data.unitPrice, 'c') +
            '</td>' +
        '</tr></table>';
    });
});
 
// *** CustomGridEditor class (transpiled from TypeScript) ***
var CustomGridEditor = (function () {
    /**
     * Initializes a new instance of a CustomGridEditor.
     */
    function CustomGridEditor(flex, binding, edtClass, options) {
        var _this = this;
        // save references
        this._grid = flex;
        this._col = flex.columns.getColumn(binding);
        // create editor
        this._ctl = new edtClass(document.createElement('div'), options);
        // connect grid events
        this._grid.beginningEdit.addHandler(this._beginningEdit, this);
        this._grid.scrollPositionChanged.addHandler(this._closeEditor, this);
        // connect editor events
        this._ctl.addEventListener(this._ctl.hostElement, 'keydown', function (e) {
            switch (e.keyCode) {
                case wijmo.Key.Tab:
                case wijmo.Key.Enter:
                    _this._closeEditor(true);
                    _this._grid.focus();
                    // forward event to the grid so it will move the selection
                    var evt = document.createEvent('HTMLEvents');
                    evt.initEvent('keydown', true, true);
                    evt['ctrlKey'] = e.ctrlKey;
                    evt['shiftKey'] = e.shiftKey;
                    evt['keyCode'] = e.keyCode;
                    _this._grid.hostElement.dispatchEvent(evt);
                    break;
                case wijmo.Key.Escape:
                    _this._closeEditor(false);
                    _this._grid.focus();
                    break;
            }
        });
        this._ctl.lostFocus.addHandler(function () {
            setTimeout(function () {
                if (!_this._ctl.containsFocus()) {
                    _this._closeEditor(true);
                }
            });
        });
        // open drop-down on f4/alt-down
        this._grid.addEventListener(this._grid.hostElement, 'keydown', function (e) {
            _this._openDropDown = false;
            if (e.keyCode == wijmo.Key.F4 ||
                (e.altKey && (e.keyCode == wijmo.Key.Down || e.keyCode == wijmo.Key.Up))) {
                _this._openDropDown = true;
                _this._grid.startEditing(true);
                e.preventDefault();
            }
        }, true);
        // close editor when user resizes the window
        window.addEventListener('resize', function () {
            if (_this._ctl.containsFocus()) {
                _this._closeEditor(true);
                _this._grid.focus();
            }
        });
    }
    Object.defineProperty(CustomGridEditor.prototype, "control", {
        // gets an instance of the control being hosted by this grid editor
        get: function () {
            return this._ctl;
        },
        enumerable: true,
        configurable: true
    });
    // handle the grid's beginningEdit event by canceling the built-in editor,
    // initializing the custom editor and giving it the focus.
    CustomGridEditor.prototype._beginningEdit = function (grid, args) {
        var _this = this;
        // check that this is our column
        if (grid.columns[args.col] != this._col) {
            return;
        }
        // check that this is not the Delete key
        // (which is used to clear cells and should not be messed with)
        var evt = args.data;
        if (evt && evt.keyCode == wijmo.Key.Delete) {
            return;
        }
        // cancel built-in editor
        args.cancel = true;
        // save cell being edited
        this._rng = args.range;
        // initialize editor host
        var rc = grid.getCellBoundingRect(args.row, args.col);
        wijmo.setCss(this._ctl.hostElement, {
            position: 'absolute',
            left: rc.left - 1 + pageXOffset,
            top: rc.top - 1 + pageYOffset,
            width: rc.width + 1,
            height: grid.rows[args.row].renderHeight + 1,
            borderRadius: '0px'
        });
        // initialize editor content
        if (!wijmo.isUndefined(this._ctl['text'])) {
            this._ctl['text'] = grid.getCellData(this._rng.row, this._rng.col, true);
        }
        else {
            throw 'Can\'t set editor value/text...';
        }
        // start editing item
        var ecv = wijmo.tryCast(grid.collectionView, 'IEditableCollectionView'), item = grid.rows[args.row].dataItem;
        if (ecv && item) {
            setTimeout(function () {
                ecv.editItem(item);
            }, 210); // FlexGrid commits edits 200ms after losing focus
        }
        // activate editor
        document.body.appendChild(this._ctl.hostElement);
        this._ctl.focus();
        setTimeout(function () {
            // get the key that triggered the editor
            var key = (evt && evt.charCode > 32)
                ? String.fromCharCode(evt.charCode)
                : null;
            // send key to editor
            if (key) {
                var input = _this._ctl.hostElement.querySelector('input');
                if (input instanceof HTMLInputElement) {
                    input.value = key;
                    wijmo.setSelectionRange(input, key.length, key.length);
                    var evtInput = document.createEvent('HTMLEvents');
                    evtInput.initEvent('input', true, false);
                    input.dispatchEvent(evtInput);
                }
            }
            else {
                _this._ctl.focus();
            }
            // open drop-down on F4/alt-down
            if (_this._openDropDown && _this._ctl instanceof wijmo.input.DropDown) {
                _this._ctl.isDroppedDown = true;
            }
        }, 50);
    };
    // close the custom editor, optionally saving the edits back to the grid
    CustomGridEditor.prototype._closeEditor = function (saveEdits) {
        if (this._rng) {
            var grid = this._grid, ctl = this._ctl, host = ctl.hostElement;
            // raise grid's cellEditEnding event
            var e = new wijmo.grid.CellEditEndingEventArgs(grid.cells, this._rng);
            grid.onCellEditEnding(e);
            // save editor value into grid
            if (saveEdits) {
                if (!wijmo.isUndefined(ctl['value'])) {
                    this._grid.setCellData(this._rng.row, this._rng.col, ctl['value']);
                }
                else if (!wijmo.isUndefined(ctl['text'])) {
                    this._grid.setCellData(this._rng.row, this._rng.col, ctl['text']);
                }
                else {
                    throw 'Can\'t get editor value/text...';
                }
                this._grid.invalidate();
            }
            // close editor and remove it from the DOM
            if (ctl instanceof wijmo.input.DropDown) {
                ctl.isDroppedDown = false;
            }
            host.parentElement.removeChild(host);
            this._rng = null;
            // raise grid's cellEditEnded event
            grid.onCellEditEnded(e);
        }
    };
    return CustomGridEditor;
}());

// This file locates: "Content/css/Lesson/C1FlexGrid/CustomEditors.css".
.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 C1FlexGridController : Controller
    {
        // GET: CustomEditors
        public ActionResult CustomEditors()
        {
            return View();
        }
    }
}

<h1>
    @Html.Raw(Resources.C1FlexGrid.CustomEditors_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.CustomEditors_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.CustomEditors_Text2)
</p>
@(Html.C1().FlexGrid().Id("theGrid")
    .AutoGenerateColumns(false)
    .Columns(cs=>
    {
        cs.Add().Binding("id").Header("ID").Width("40").IsReadOnly(true);
        cs.Add().Binding("date").Header("Date").Format("d");
        cs.Add().Binding("time").Header("Time").Format("t");
        cs.Add().Binding("country").Header("Country");
        cs.Add().Binding("product").Header("Product");
        cs.Add().Binding("amount").Header("Amount").Format("n2");
    })
)