Disable, Readonly and MaxLength for KendoEditor

11 posts, 0 answers
  1. Chris
    Chris avatar
    29 posts
    Member since:
    Feb 2013

    Posted 16 Sep 2013 Link to this post

    How do i set Disable, Readonly and MaxLength for KendoEditor?
    I also need Disable and enable for Dropdown controls as well.. I am guessing its the same options as Editor (if available)
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 18 Sep 2013 Link to this post

    Hello Chris,

    Up to your questions
    • Editor
    I am afraid there are no built-in options in Kendo UI for your requirements, however you could make the Editor Readonly using the following code snippet:
    <script>
    $(function () {
       $($('#editor').data().kendoEditor.body).attr('contenteditable', false);
    })
    </script>
    Regarding the MaxLength, I am afraid there is no a suitable workaround I can suggest.
    • DropDownList:
    You could enable / disable / make it readonly thought its API.

    Regards,
    Iliana Nikolova
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Raymond
    Raymond avatar
    65 posts
    Member since:
    Oct 2013

    Posted 17 Feb 2015 in reply to Iliana Nikolova Link to this post

    Hi Iliana,

    I am trying to make the editor readonly but the example you gave doesn't work for me.  The editor is setup as follows in the page;

    <textarea id="txtNarrative"
              name="txtNarrative"
              class="form-control"
              ng-model="rptSectionText.narrative"
              ng-required="true"
              kendo-editor
              k-encoded="false"
              k-tools="editorTools"
              style="height: 400px;"
              stylesheets="['/Content/KendoEditor.css']">
    </textarea>

    And the code I'm using in my controller is;

    $(document).ready(function () {
        // Disable the editor...
        $(function () {
            $($("#txtNarrative").data().kendoEditor.body).attr("contenteditable", $scope.formData.edit);
        })
    });

    but I have also tried;

    $(document).ready(function () {
        // Disable the editor...
        $($("#txtNarrative").data().kendoEditor.body).attr("contenteditable", $scope.formData.edit);
    });

    and;

    $(document).ready(function () {
        var editor = $('#txtNarrative').data('kendoEditor');
        editor.body.contentEditable = $scope.formData.edit;
    });

    In the first and second examples I get the error "Uncaught TypeError: Cannot read property 'kendoEditor' of null".
    In the third example I get "Uncaught TypeError: Cannot read property 'body' of null".

    It appears it can't resolve "kendoEditor" in any of the code.

    What can I do to resolve this?
  5. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 19 Feb 2015 Link to this post

    Hi Raymond,

    You should execute the suggested code snippet after the Editor widget is initialized. For this purpose you could use the kendoWidgetCreated event.

     

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Raymond
    Raymond avatar
    65 posts
    Member since:
    Oct 2013

    Posted 19 Feb 2015 in reply to Iliana Nikolova Link to this post

    Hi Iliana,

    From your reply it is apparent the Kendo widgets are initialised after the document is created - I had assumed they were created prior.

    Regards,

    Ray
  7. Raymond
    Raymond avatar
    65 posts
    Member since:
    Oct 2013

    Posted 22 Feb 2015 in reply to Iliana Nikolova Link to this post

    Hi Iliana,

    I tried changing my code to set the editor read-only as you suggested and shown below;

    <textarea id="txtNarrative"
              name="txtNarrative"
              class="form-control"
              ng-model="rptSectionText.narrative"
              ng-required="true"
              kendo-editor
              k-encoded="false"
              k-tools="editorTools"
              style="height: 400px;"
              stylesheets="['/Content/KendoEditor.css']">
    </textarea>

    and 

    $scope.$on("kendoWidgetCreated", function (event, widget) {
        console.log(widget.element);
     
        if (widget === $scope.txtNarrative) {
            console.log("Found narrative widget...");
            $($("#txtNarrative").data().kendoEditor.body).attr("contenteditable", $scope.formData.edit);
        }
    });

    However it never executes the line to set the "contenteditable" attribute.

    The line "console.log(widget.element);" produces the following content;

    [textarea#txtNarrative.form-control.ng-pristine.ng-untouched.ng-invalid.ng-invalid-required.k-content…, context: textarea#txtNarrative.form-control.ng-pristine.ng-untouched.ng-invalid.ng-invalid-required.k-content…, constructor: function, init: function, handler: function, autoApplyNS: function…]

    So it appears to be firing correct event.

    I also tried changing "kendo-editor" to 'kendo-editor="editorWidget"' and testing for this within the "kendoWidgetCreated" event but this didn't work either.

    Am I missing something?
  8. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 23 Feb 2015 Link to this post

    Hi Ray,

    Please take a look at this dojo which demonstrates how the expected outcome could be achieved.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  9. Raymond
    Raymond avatar
    65 posts
    Member since:
    Oct 2013

    Posted 24 Feb 2015 in reply to Iliana Nikolova Link to this post

    Hi Iliana,

    I had a look at the domo example you provided and while it for you I could not get it to work in my code, I even copied the entire "$scope.$on" method from your example to my code and it still failed to work.

    I eventually modified my code as follows to get it to work;

    // Set the editor to read-only until the user selects "Edit"...
    $scope.$on("kendoWidgetCreated", function (event, widget) {
        console.log(widget.element);
     
        if (widget === $scope.txtNarrative) {
            console.log("Found narrative widget...");
            $($("#txtNarrative").data().kendoEditor.body).attr("contenteditable", $scope.formData.edit);
        }
     
        var editor = $('#txtNarrative').data('kendoEditor');
     
        if (editor !== undefined) {
            editor.body.contentEditable = false;
            $('.k-editor-toolbar').hide();
        }
    });

    The code never picks up the widget in the line "if (widget === $scope.txtNarrative)" but it does work using jQuery to find the editor.

    Can't understand why the original code doesn't work but I hope this helps someone esle in the future.

    Thanks for all your help.
  10. Raymond
    Raymond avatar
    65 posts
    Member since:
    Oct 2013

    Posted 24 Feb 2015 in reply to Iliana Nikolova Link to this post

    Hi Iliana,

    I had a look at the example you provided and it works as you would expect.  Unfortunately it still didn't work in my code, I even tried copying your example into my code.  I eventually modified the code as follows to use jQuery to locate the editor after it had been created;

    // Set the editor to read-only until the user selects "Edit"...
        $scope.$on("kendoWidgetCreated", function (event, widget) {
            console.log(widget.element);
     
            if (widget === $scope.txtNarrative) {
                console.log("Found narrative widget...");
                $($("#txtNarrative").data().kendoEditor.body).attr("contenteditable", $scope.formData.edit);
            }
     
            var editor = $('#txtNarrative').data('kendoEditor');
     
            if (editor !== undefined) {
                editor.body.contentEditable = false;
                $('.k-editor-toolbar').hide();
            }
        });

    I hope this helps anyone in the future who has a similar problem.

    Thanks for all your help.
  11. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2595 posts

    Posted 25 Feb 2015 Link to this post

    Hi Ray,

    I am glad to hear the desired outcome is achieved and thank you for sharing your solution with the community.

    Regards,
    Iliana Nikolova
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  12. Raymond
    Raymond avatar
    65 posts
    Member since:
    Oct 2013

    Posted 08 Mar 2015 in reply to Iliana Nikolova Link to this post

    Hi Iliana,

    I had a look at the example you provided and it did work as expected however it still fails to work in my code?

    As a workaround I ended up using the following;

    // Set the editor to read-only until the user selects "Edit"...
    $scope.$on("kendoWidgetCreated", function (event, widget) {
        // The following code didn't work because the "if (widget === $scope.txtNarrative)" statement never returned true?
        //if (widget === $scope.txtNarrative) {
        //  console.log("Found narrative widget...");
        //  $($("#txtNarrative").data().kendoEditor.body).attr("contenteditable", $scope.formData.edit);
        //}
     
        var editor = $('#txtNarrative').data('kendoEditor');
     
        if (editor !== undefined) {
            editor.body.contentEditable = false;
            $('.k-editor-toolbar').hide();
        }
    });

    Regards,

    Ray
Back to Top
Kendo UI is VS 2017 Ready