How can i disable kendo editor in asp.net mvc

问题

How can I disable kendo editor or make it read only? I tried using HTML attribute but no luck ( or I still do it right)

                    @(Html.Kendo().Editor()
                    .Name("Text")
                    .Value(@detail.SRoomInformation)
                    .Tools(tools => tools.Clear())
                    )

回答1:

If you are wondering why there is no such option such as Enable/Disable - because html could be simply shown as html or as text - all the tools the Editor provide are not needed and it is pointless to use such widget. Editor means it helps you edit ;)

If you really want to make it disabled you can use the following line of code after initializing the Editor

e.g.

@Html.Kendo().Editor().Name("test")


<script type="text/javascript">
    $(function () {
        $($('#test').data().kendoEditor.body).attr('contenteditable', false)
    })        
</script>

回答2:

No Idea why the answered question didn't work for me. But anyway, it sparked something like:

@(Html.Kendo().EditorFor(model => model.Description) )
@Html.ValidationMessageFor(model => model.Description)
<script>
    // this piece of code neeeeeeeds to be heeeeere! Don't move it
    $(document).ready(function () {
        var editor = $('#Description').data('kendoEditor');
        editor.body.contentEditable=false;
    });
</script>

And this worked!:) Have fun!

回答3:

None of the above solutions worked for me when I tried to implement them. It seems that Telerik has provided an extremely simple solution to this involving an overlaid div as documented at: http://docs.telerik.com/kendo-ui/controls/editors/editor/how-to/enable-and-disable-editor

In practice this resulted in an extra div next to the control I wanted to disable:

<div ng-if="readonly/disabled_Condition == true">
     <div id="overlay" style="width:100%;height:250px; top:100; position:absolute; background-color: black; opacity:0.1; z-index:2;"></div>
     <textarea kendo-editor k-options="options.DutyEditor" ng-model="item.TasksHtml"></textarea>
</div>

The one issue is matching up the size of the overlaid div to the size of your kendo editor. In my case it's a simple 100% width and 250px height, so I lucked out here.

Thought this might help someone!

来源：https://stackoverflow.com/questions/15182896/how-can-i-disable-kendo-editor-in-asp-net-mvc

标签

kendo-ui