Disable kendo editor in one column of a Kendo grid - kendo-grid

Question

I have this kendo grid
#(Html.Kendo().Grid<TekstenViewModel.Tekst>()
.Name("Grid")
.Columns(columns =>
{
columns.Template(#<text></text>).ClientTemplate("<input type='checkbox'/>").Width(10).Hidden(!Model.Administrator);
columns.Bound(product => product.Naam).Width(125).ClientTemplate("<div id='editorDiv'><div class='input'>#=Naam#</div><div class='editor'>" +
Html.WebCore().LinkButton(type: ButtonType.MeerActies, htmlAttributes: new { onclick = "openPopupDemo('#: Naam #', '#: ID #', 'Naam')" }));
columns.Bound(product => product.Waarde).Width(125).ClientTemplate("<div id='editorDiv'><div class='input'>#=Waarde#</div><div class='editor'>" +
Html.WebCore().LinkButton(type: ButtonType.MeerActies, htmlAttributes: new { onclick = "openPopupDemo('#: Waarde #', '#: ID #', 'Waarde')" }));
columns.Bound(product => product.Opmerking).Width(250).ClientTemplate("<div id='editorDiv'><div class='input'>#=Opmerking#</div><div class='editor'>" +
Html.WebCore().LinkButton(type: ButtonType.MeerActies, htmlAttributes: new { onclick = "openPopupDemo('#: Opmerking #', '#: ID #', 'Opmerking')" }));
columns.Template(#<text></text>).ClientTemplate("<div id='deleteDiv'><div class='delete'><a class=\"delete iconBtn\" onclick=\"deleteResourceItem(#: ID #, '#: Naam #')\"></a></div></div>").Width(10).Hidden(!Model.Administrator);
})
.Pageable()
.Sortable()
.Filterable()
.Events(events => events.Edit("onCellEdit"))
.Groupable()
.Navigatable()
.Editable(editable => editable.Mode(GridEditMode.InCell).DisplayDeleteConfirmation(false))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.Model(model =>
{
model.Id(product => product.ID);
model.Field(product => product.Naam).Editable(Model.Administrator);
model.Field(product => product.Opmerking).Editable(Model.Administrator);
model.Field(product => product.Waarde).Editable(!Model.ReadOnly);
model.Field(product => product.RESOURCE_SET_ID).DefaultValue(Model.SetID);
model.Field(product => product.Type).DefaultValue(Domain.Agromilieu2.Common.Objects.Entities.Resources.ResourceType.GLOBAL_RESOURCES);
model.Field(product => product.Taal).DefaultValue(Domain.Agromilieu2.Common.Agromilieu2Constants.Resources.DEFAULT_TAAL_CODE);
})
.Create(create => create.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_CreateUpdate, MVC.BeheerTeksten.Name))
.Read(read => read.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_Read, MVC.BeheerTeksten.Name, new { setID = Model.SetID }).Data("onReadAdditionalData"))
.Update(update => update.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_CreateUpdate, MVC.BeheerTeksten.Name))
.Destroy(destroy => destroy.Action(MVC.BeheerTeksten.ActionNames.ResourceItems_Delete, MVC.BeheerTeksten.Name))
)
)
#Html.WebCore().Popup.Remove("confirmResourceItemPopup", "Verwijderen resource item", "")
Here is a picture of the grid
The dotted buttons open a Kendo Editor.
I am using Claims Authentication in my project. I have ReadOnly and Administrator permissions. If you have ReadOnly permissions, the editor is disabled.
This is my editor.
#Html.WebCore().Popup.CustomButtons("popupDemo", "Waarde", Html.Kendo().Editor().Name("waardeEditor").HtmlAttributes(new { #class = "editorStyle" }).Tools(tools => tools
.Clear()
.Bold().Italic().Underline().Strikethrough()
.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
.InsertUnorderedList().InsertOrderedList()
.Outdent().Indent()
.CreateLink().Unlink()
.InsertImage()
.SubScript()
.SuperScript()
.TableEditing()
.ViewHtml()
.Formatting()
.FontName()
.FontSize()
.FontColor().BackColor()
).ToHtmlString(), new[]{new PopupButton("popupDemoAnnuleren", "Cancel", false),new PopupButton("popupDemoOk", "OK")})
And this is the code to disable it when ReadOnly is true.
$(document).ready(function () {
if ('#Html.Raw(Json.Encode(Model.ReadOnly))' == "true") {
$("#waardeEditor").data("kendoEditor").body.contentEditable = false;
}
});
So, what this does is disable editing in the editor, no matter which button you click.
Now, I do have a situation where a user has more than ReadOnly permissions, but is not Administrator either. That means he can edit and save only the Waarde column.
I do have a way of disabling the buttons in the other columns, but the requirements of my application specify that the user should be able to open the content of cells in Naam and Opmerking columns in the editor, but not be able to edit it and that they should be able to open and edit the contents of Waarde columns.
And this is where I'm stuck. I can't figure out a way to disable the editor in all columns, except when you click any button in the Waarde column.

Answer 1

I did it. It was simpler than I thought. I used the onPopupDemo method that I used to open the editor.
here's the code.
var selectedGridRowID = 0;
var selectedGridColumnName;
function openPopupDemo(gridCellContent, gridIdentifier, columnIdentifier) {
var editor = $("#waardeEditor").data("kendoEditor")
if ('#Html.Raw(Json.Encode(Model.ReadOnly))' == "false" && '#Html.Raw(Json.Encode(Model.Administrator))' == "false" && columnIdentifier != "Waarde") {
editor.value(gridCellContent)
editor.body.contentEditable = false;
}
else {
editor.value(gridCellContent)
editor.body.contentEditable = true;
}
domain.WebCore.popup.show("popupDemo");
selectedGridRowID = gridIdentifier;
selectedGridColumnName = columnIdentifier;
};