This is a migrated thread and some comments may be shown as answers.

How to disable Editor in Fluent API?

1 Answer 278 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Ian
Top achievements
Rank 1
Veteran
Ian asked on 12 Nov 2020, 01:41 PM

I am using the Fluent API of the Telerik UI for Asp.Net MVC to build a form that has an Editor as one of it's elements, bound to a backing property in my model. I want my view to act as both the edit and display page for my model, so I want to disable the Editor when in display mode, but I cannot find a method to do so, and my attempts to change the contenteditable attribute to false have failed. y research lead me to work arounds in other version of Kendo-UI that haven't worked for me. Below is a snippet of my form with the Editor that I am looking to disable.

@(Html
    .Kendo()
    .Form<InformationModel>()
    .Name("formInformation")
    .HtmlAttributes(new { action="Add", method="POST"})
    .Items(i => {
            i.Add()
            .Field(f => f.Description)
            .Editor(e => e.Editor().HtmlAttributes(new { contenteditable = false }))
            .Label(l => l.Text(SharedHtmlLocalizer["Description"].Value))
            .InputHtmlAttributes(new { data_val_required = string.Format(Localizer["TheField_Name_IsRequired"], Localizer["Description"]), contenteditable=ViewBag.IsEdit });
        }
    )
)

How can I disable this Editor through the Fluent API? If that isn't possible, how can I disable it via javascript (specifically jQuery)?

1 Answer, 1 is accepted

Sort by
0
Accepted
Ivan Danchev
Telerik team
answered on 16 Nov 2020, 10:19 AM

Hello Ian,

The Editor does not have a disabling/enabling configuration option or an API method dedicated to that. There is a way to prevent the user from editing its content through javascript:

<script>
	$(document).ready(function () {
		var editor = $("#Description").data("kendoEditor");
		var	editorBody = $(editor.body);

		// Make the Editor read-only:
		editorBody.removeAttr("contenteditable").find("a").on("click.readonly", false);

		// Make the Editor editable:
		//editorBody.attr("contenteditable", true).find("a").off("click.readonly");
	})
</script>

Regards,
Ivan Danchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Editor
Asked by
Ian
Top achievements
Rank 1
Veteran
Answers by
Ivan Danchev
Telerik team
Share this question
or