Make all columns editable when adding a record while existing records only allow some columns to be edited

1
votes

Problem Description

I am trying to implement a grid using Telerik UI that is used to display/update/create records. The grid is configured to use in-cell editing and for updating, only some of the columns are editable, but when the user adds a record, every cell of the newly added row should be editable. I have already tried to hook the Edit event and make the field editable, however by doing so, not only the Title cell of the new row becomes editable, but also the existing Title cells.

The relevant code sections of the view can be found below.

Data.cshtml

<script>
    'use strict';

    function onEdit(event) {
        if (event.model.isNew()) {
            event.model.fields.Title.editable = true;
        }
    }
</script>

@(Html.Kendo().Grid<DataViewModel>()
    .Name("DataGrid")
    .Columns(columns =>
    {
        columns.Bound(model => model.Title);
        columns.Bound(model => model.Description);
        columns.Bound(model => model.Count);
    })
    .Editable(edit => edit.Mode(GridEditMode.InCell))
    .ToolBar(toolbar =>
    {
        toolbar.Create();
        toolbar.Save();
    })
    .Events(events => events
        .Edit("onEdit")
    )
    .DataSource(dataSource => dataSource
        .Ajax()
        .Batch(true)
        .ServerOperation(false)
        .Read("DataRead", "Data")
        .Create("DataCreate", "Data")
        .Update("DataUpdate", "Data")
        .Model(model =>
        {
            model.Id(x => x.Id);
            model.Field(x => x.Title).Editable(false);
        })
    )
)

Kendo UI v2020.2.617, Telerik.UI.for.AspNet.Core 2020.2.617

1
c#asp.net-corekendo-ui

1 Answers

2
votes

One option would be rather than setting the model editable property and hooking the onEdit event, you could try the following which will call a js function to determine if the column should be editable:

@(Html.Kendo().Grid<DataViewModel>()
    .Name("DataGrid")
    .Columns(columns =>
    {
        columns.Bound(model => model.Title).Editable("titleEditable");
        columns.Bound(model => model.Description);
        columns.Bound(model => model.Count);
    })
    //truncated for brevity


<script>
        function titleEditable(dataItem) {
            return dataItem.isNew();
        }
</script>