Inline Editing

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

If for some reason you don't like the Excel-style editing and prefer to add editing buttons to every row (typical of editable HTML tables), you can accomplish that using the formatItem event and a little code.

The grid below demonstrates this approach:

Country

Sales

Expenses

Edit

81,732.54

38,401.13

Germany

20,603.32

27,944.24

44,217.79

48,877.49

Japan

29,190.63

23,365.74

Sweden

46,951.19

49,107.56

// This file locates: "Scripts/Lesson/C1FlexGrid/InlineEditing.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    // make rows taller to accommodate edit buttons and input controls
    theGrid.rows.defaultSize = 40;
 
    // custom formatter to paint buttons and editors
    theGrid.formatItem.addHandler(function(s, e) {
        if (e.panel == s.cells) {
            var col = s.columns[e.col],
                  item = s.rows[e.row].dataItem;
 
            if (item == currentEditItem) {
 
                // create editors and buttons for the item being edited
                switch (col.binding) {
                    case 'Buttons':
                        e.cell.innerHTML = document.getElementById('tplBtnEditMode').innerHTML;
                        e.cell.dataItem = item;
                        break;
                    case 'Country':
                    case 'Sales':
                    case 'Expenses':
                        e.cell.innerHTML = '<input class="form-control" ' +
                          'id="' + col.binding + '" ' +
                          'value="' + s.getCellData(e.row, e.col, true) + '"/>';
                        break;
                }
            } else {
 
                // create buttons for items not being edited
                switch (col.binding) {
                    case 'Buttons':
                        e.cell.innerHTML = document.getElementById('tplBtnViewMode').innerHTML;
                        e.cell.dataItem = item;
                        break;
                }
            }
        }
    });
 
    // handle button clicks
    theGrid.addEventListener(theGrid.hostElement, 'click', function (e) {
        var target = e.target;
        if (e.target.tagName != 'BUTTON') {
            target = e.target.parentNode;
        }
 
        if (target != null && target.tagName == 'BUTTON') {
 
            // get button's data item
            var item = wijmo.closest(e.target, '.wj-cell').dataItem;
 
            // handle buttons
            switch (target.id) {
 
                // start editing this item
                case 'btnEdit':
                    editItem(item);
                    break;
 
                    // remove this item from the collection
                case 'btnDelete':
                    theGrid.collectionView.remove(item);
                    break;
 
                    // commit edits
                case 'btnOK':
                    commitEdit();
                    break;
 
                    // cancel edits
                case 'btnCancel':
                    cancelEdit();
                    break;
            }
        }
    });
 
    // exit edit mode when scrolling the grid or losing focus
    theGrid.scrollPositionChanged.addHandler(cancelEdit);
    theGrid.lostFocus.addHandler(cancelEdit);
    theGrid.resizingColumn.addHandler(cancelEdit);
    theGrid.draggingColumn.addHandler(cancelEdit);
    theGrid.sortingColumn.addHandler(cancelEdit);
 
    // editing commands
    var currentEditItem = null;
 
    function editItem(item) {
        cancelEdit();
        currentEditItem = item;
        theGrid.invalidate();
    }
 
    function commitEdit() {
        if (currentEditItem) {
            theGrid.columns.forEach(function (col) {
                var input = theGrid.hostElement.querySelector('#' + col.binding);
                if (input) {
                    var value = wijmo.changeType(input.value, col.dataType, col.format);
                    if (wijmo.getType(value) == col.dataType) {
                        currentEditItem[col.binding] = value;
                    }
                }
            });
        }
        currentEditItem = null;
        theGrid.invalidate();
    }
 
    function cancelEdit() {
        if (currentEditItem) {
            currentEditItem = null;
            theGrid.invalidate();
        }
    }
});

using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: InlineEditing
        public ActionResult InlineEditing()
        {
            return View(Models.FlexGridData.GetSales(Models.FlexGridData.Countries7));
        }
    }
}

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.InlineEditing_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.InlineEditing_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.InlineEditing_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.InlineEditing_Text3)
</p>
 
@(Html.C1().FlexGrid().Id("theGrid").Height(200)
    .IsReadOnly(true)
    .SelectionMode(C1.Web.Mvc.Grid.SelectionMode.None)
    .HeadersVisibility(C1.Web.Mvc.Grid.HeadersVisibility.Column)
    .AutoGenerateColumns(false)
    .Bind(Model)
    .Columns(cs =>
    {
        cs.Add().Binding("Id").Header("ID").Width("50");
        cs.Add().Binding("Country").Header("Country").IsRequired(true);
        cs.Add().Binding("Sales").Header("Sales").Format("n2");
        cs.Add().Binding("Expenses").Header("Expenses").Format("n2");
        cs.Add().Binding("Buttons").Header("Edit").Width("160");
    })
)
 
<!-- template for buttons on items in view mode -->
<div id="tplBtnViewMode" style="display:none">
    <button id="btnEdit" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-pencil"></span> @Resources.Resource.Btn_Edit
    </button>
    <button id="btnDelete" class="btn btn-default btn-sm">
        <span class="glyphicon glyphicon-remove"></span> @Resources.Resource.Btn_Delete
    </button>
</div>
 
<!-- template for buttons on items in edit mode -->
<div id="tplBtnEditMode" style="display:none">
    <button id="btnOK" class="btn btn-primary btn-sm">
        <span class="glyphicon glyphicon-ok"></span> @Resources.Resource.Btn_Ok
    </button>
    <button id="btnCancel" class="btn btn-warning btn-sm">
        <span class="glyphicon glyphicon-ban-circle"></span> @Resources.Resource.Btn_Cancel
    </button>
</div>