Editing Events

FlexGrid has several events related to editing.

This example shows how you can use two of them:

beginningEdit: Prevent editing overdue items by setting the cancel parameter to true.
cellEditEnding: Prevent entering negative amounts for the 'sales' and 'expenses' columns.

// This file locates: "Scripts/Lesson/C1FlexGrid/CustomEditing.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
 
    theGrid.beginningEdit.addHandler(function(s, e) {
        var col = s.columns[e.col];
        if (col.binding != 'Overdue') {
            var item = s.rows[e.row].dataItem;
            if (item.Overdue) { // prevent editing overdue items
                e.cancel = true;
                showMessage('Overdue items cannot be edited');
            }
        }
    });
    theGrid.cellEditEnding.addHandler(function (s, e) {
        showMessage('&nbsp;');
        var col = s.columns[e.col];
        if (col.binding == 'Sales' || col.binding == 'Expenses') {
            var value = wijmo.changeType(s.activeEditor.value, wijmo.DataType.Number, col.format);
            if (!wijmo.isNumber(value) || value < 0) { // prevent negative sales/expenses
                e.cancel = true;
                showMessage('Please enter a positive amount');
            }
        }
    });
 
    // show log message
    var elLog = document.getElementById('log');
    function showMessage(msg) {
        elLog.innerHTML = msg;
    }
});

// This file locates: "Content/css/Lesson/C1FlexGrid/CustomEditing.css".
#log {
  font-style: italic;
  text-align: center;
  margin-bottom: 10px;
  opacity: .5;
}

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

@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.CustomEditing_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.CustomEditing_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.CustomEditing_Text2)
</p>
<ul>
    <li>
        @Html.Raw(Resources.C1FlexGrid.CustomEditing_Text3)
    </li>
    <li>
        @Html.Raw(Resources.C1FlexGrid.CustomEditing_Text4)
    </li>
</ul>
<div id="log">
    @Html.Raw(Resources.C1FlexGrid.CustomEditing_Text5)
</div>
@(Html.C1().FlexGrid().Id("theGrid").Height(200)
    .AutoGenerateColumns(false)
    .Bind(Model)
    .Columns(cs =>
    {
        cs.Add().Binding("Id").Header("ID").Width("50").IsReadOnly(true);
        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("Overdue").Header("Overdue");
    })
)