Read-Only, Required Columns

You can disable editing at the grid, column, or row levels using the isReadOnly property of the grid, column, or row objects respectively. You can also disable editing for specific cells using the cellEditStarting event.

You can use the column's isRequired property to determine whether empty/null values should be allowed for that column.

The grid below prevents users from entering empty values for the 'Country' column, and allows them to delete the content of the numeric columns.

The grid also uses the beginningEdit event to prevent users from editing items that are overdue:

ID
Country
Sales
Expenses
Overdue
0
US
81,732.54
38,401.13
1
Germany
20,603.32
27,944.24
2
UK
44,217.79
48,877.49
3
Japan
29,190.63
23,365.74
4
Italy
46,951.19
49,107.56
5
Greece
86,237.02
49,767.35
1
2
3
4
5
6
7
8
9
10
// This file locates: "Scripts/Lesson/C1FlexGrid/ReadOnlyRequiredColumns.js".
c1.documentReady(function () {
    var theGrid = wijmo.Control.getControl('#theGrid');
    theGrid.beginningEdit.addHandler(function (s, e) {
        var item = s.rows[e.row].dataItem;
        if (item.Overdue) { // prevent editing overdue items
            e.cancel = true;
        }
    });
});
1
2
3
4
5
6
7
8
9
10
11
12
13
using System.Web.Mvc;
 
namespace LearnMvcClient.Controllers
{
    public partial class C1FlexGridController : Controller
    {
        // GET: ReadOnlyRequiredColumns
        public ActionResult ReadOnlyRequiredColumns()
        {
            return View(Models.FlexGridData.GetSales());
        }
    }
}
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
@model IEnumerable<FlexGridData.Sale>
 
<h1>
    @Html.Raw(Resources.C1FlexGrid.ReadOnlyRequiredColumns_Title)
</h1>
<p>
    @Html.Raw(Resources.C1FlexGrid.ReadOnlyRequiredColumns_Text1)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ReadOnlyRequiredColumns_Text2)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ReadOnlyRequiredColumns_Text3)
</p>
<p>
    @Html.Raw(Resources.C1FlexGrid.ReadOnlyRequiredColumns_Text4)
</p>
@(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").IsRequired(false);
        cs.Add().Binding("Expenses").Header("Expenses").IsRequired(false);
        cs.Add().Binding("Overdue").Header("Overdue");
    })
)