How to access a kendo Grid Template row and remove an attribute from every field when the row is activated for editing

[Acadia]

Hello,

 

I have a Kendo grid with the following edit template row:

@(Html.Kendo().Grid<CorpCAPPCards.Models.CAPPCard>()
            .Name("CardGrid")
            .ToolBar(t => { t.Create().Text("New Observation"); })
            .Editable(e => e.Mode(GridEditMode.InLine).Window(w => { w.Events(ev => { ev.Activate("killKendoValidation"); }); }))
            .Columns(columns =>
            {
                columns.Template(@<text></text>)
                       .ClientTemplate("<a class='k-button k-grid-edit k-button-icon'><span class='k-icon k-edit'></span></a><a class='k-button k-grid-delete k-button-icon'><span class='k-icon k-delete'></span></a>")
                       .Width(78);
                columns.Bound(p => p.Job);
                columns.Bound(p => p.EntryDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.EntryUser);
                columns.Bound(p => p.ObservationDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.Observer);
                columns.Bound(p => p.CBICode);
                columns.Bound(p => p.AllSafe).ClientTemplate("<input type='checkbox' disabled='disabled' #= AllSafe == true ? checked='checked' : '' #/>");
               
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Model(m => { m.Id("ID"); m.Field(f => f.EntryDate).DefaultValue(DateTime.Today); m.Field(f => f.ObservationDate).DefaultValue(DateTime.Today); })
                .Read(r => r.Action("GetCards", "Grid"))
                .Update(u => u.Action("UpdateCard", "Grid"))
                .Create(c => c.Action("AddCard", "Grid"))
                .Destroy(d => d.Action("DeleteCard", "Grid"))
            )
            .ClientDetailTemplateId("CardDetailTemplate")
            .Events(e => { e.Edit("setEditWindowTitle"); })
        ) 

 

 

   <script id="CardDetailTemplate" type="text/x-kendo-template">
            <div class="col-md-3" style="text-align:center;"><span style="font-weight:bold;">Observation:</span><br /><textarea readonly="readonly" rows="7" style="width:100%">#: Observation#</textarea></div>
            <div class="col-md-3" style="text-align:center;"><span style="font-weight:bold;">Root Cause:</span><br /><textarea readonly="readonly" rows="7" style="width:100%">#: RootCause #</textarea></div>
            <div class="col-md-3" style="text-align:center;"><span style="font-weight:bold;">Action:</span><br /><textarea readonly="readonly" rows="7" style="width:100%">#: Action #</textarea></div>
            <div class="col-md-3" style="text-align:center;"><span style="font-weight:bold;">Communication:</span><br /><textarea readonly="readonly" rows="7" style="width:100%">#: Communication #</textarea></div>
            <div class="col-md-3" style="text-align:center;"><span style="font-weight:bold;">Reviewed By:</span><br /><textarea readonly="readonly" rows="7" style="width:100%">#: ReviewedBy #</textarea></div>
        </script>
        <script>

I would like to loop through the fields in this templated row when it is activated for edit and remove the RaedOnly attribute for every cell.  How could I do this?

Am I even heading in the right direction for accessing the fields with the below code?  How do I detect when the templated row is active in edit mode?

  var dataItem = $("#Grid").data("kendoGrid").dataSource.get(2);
            var row = $("#Grid").data("kendoGrid")
                   .tbody
                   .find("tr[readonly='true']");

Thanks

[Alexander Popov]

Hello,

I would suggest subscribing to the Grid's edit event. Once it is triggered you can get the Grid's editable element, which in the current context should be the <tr>, then remove attributes as per requirements. For example: 

function onEdit(e) {
 this.editable.element.find("textarea").each(...);
}

Regards,
Alexander Popov
Telerik