在 Kendo的MVC Grid中建立唯讀column

 當我們建立Kendo 的MVC grid時會有以下代碼

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 30 31 32 33 34 35 36 37 38

@( Html.Kendo().Grid<KendoGridReadOnlyColumn.Models.TestModel>() .Name("Blog_Grid") .Columns(columns => { columns.Bound(p => p.column1).Title("Column 1"); columns.Bound(p => p.column2).Title("Column 2"); columns.Bound(p => p.column3).Title("Column 3"); columns.Bound(p => p.column4).Title("Column 4"); columns.Bound(p => p.column5).Title("Column 5"); columns.Bound(p => p.column6).Title("Column 6"); columns.Bound(p => p.column7).Title("Column 7"); columns.Command(command => { command.Edit(); command.Destroy(); }); }) .ToolBar(tools => { tools.Create(); }) .Pageable(pageable => pageable .Refresh(true) .PageSizes(new[] { 10, 20, 40, 60, 100, 200, 300 }) .ButtonCount(10) ) .Sortable() .Filterable() .Resizable(resize => resize.Columns(true)) .Editable(editable => editable.Mode(GridEditMode.InLine)) .DataSource(datasource => datasource .Ajax() .PageSize(10) .Model(model => model.Id(p => p.column1)) .Create(create => create.Action("Create", "Home")) .Read(read => read.Action("Read", "Home")) .Update(update => update.Action("Update", "Home")) .Destroy(update => update.Action("Destroy", "Home")) ) ) 方法1. 這時我們可以在.Sortable()下面加入一行.Events(events => events.Edit("edit")) .Sortable() .Events(events => events.Edit("edit")) 接下來再寫個function <script type="text/javascript"> function edit(e) { if (e.model.isNew() == false) { $("#column1").attr("readonly", true); //想要唯讀的欄位 } } </script> 大功告成 參考來源 http://www.adambumgardner.com/blog/2015/12/17/make-a-read-only-column-in-kendo-ui-grid-edit-mode 方法2. 將 .Model(model => model.Id(p => p.column1)) 改成 model.Field(model => p.column1).Editable(false);