Disable, Readonly and MaxLength for KendoEditor

13 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
    2622 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. 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?
  4. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 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!
     
  5. 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
  6. 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?
  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 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!
     
  8. 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.
  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 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.
  10. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 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!
     
  11. 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
  12. Adam
    Adam avatar
    3 posts
    Member since:
    Feb 2017

    Posted 06 Jun Link to this post

    I am having the same issue using all the examples provided above, my difference is that I'm trying to do this from a modal and an angular template.
    <div class="page page-forms-common">
        <div class="pageheader">
           <h2>Transactions</h2>
        </div>
     
        <div ng-include="'views/card/CardHeader.html'" ng-controller="CardHeaderCtrl"></div>
        <br />
     
        <div>
           <script type="text/ng-template" id="disputeButtonTemplate">
              <button class="k-button k-button-icontext" ng-click="openDispute('lg')">Dispute</button>
           </script>
           <kendo-grid options="transactionGridOptions" id="transactionsGrid">
     
           </kendo-grid>
     
        </div>
        <script type="text/ng-template" id="DisputeTransactions.html">
           <div>
              <div class="modal-header">
                 <h3 class="modal-title custom-font">Dispute Notes</h3>
              </div>
              <div class="modal-body">
                 <label for="noteHistory">
                    Previous Notes:
                 </label>
               <textarea kendo-editor="txtNarrative"
                    ng-model="html" id="txtNarrative" name="txtNarrative"
                    class="form-control"
                    ng-required="true"
                    k-encoded="false"
                    k-tools="editorTools"
                    style="height: 400px;"></textarea>
                 <!--<textarea kendo-editor="previousNotes" ></textarea>-->
                 <label for="newNote">
                    Add Note:
                 </label>
                 <textarea kendo-editor="newNote"></textarea>
              </div>
              <div class="modal-footer">
                 <button class="btn btn-orange" ng-click="cancel()">Cancel</button>
                 <button class="btn btn-blue" ng-click="ok()">Submit</button>
              </div>
           </div>
        </script>
    </div>
    var transactionData = [
        {
           "TransactionId": "1",
           "Transaction_Date": "02/14/2017 17:00:000",
           "Transction_Amount": "$200.00",
           "Merchant_Name": "1-800-Flowers",
           "Transaction_Description": "home delivery",
           "Balance": "$1500.00"
        }, {
           "TransactionId": "2",
           "Transaction_Date": "02/15/2017 17:00:000",
           "Transction_Amount": "$300.00",
           "Merchant_Name": "Shane Co",
           "Transaction_Description": "Shane Co in-store purchase",
           "Balance": "$1200.00"
        }, {
           "TransactionId": "3",
           "Transaction_Date": "02/16/2017 08:30:000",
           "Transction_Amount": "$200.00",
           "Merchant_Name": "King Soopers",
           "Transaction_Description": "foo",
           "Balance": "$1000.00"
        }
    ];
     
    app.controller("TransactionGridCtrl", function ($scope, $uibModal) {
     
        $scope.transactionGridOptions = {
           toolbar: [{ name: "excel" }, { name: "pdf" }, { template: kendo.template($('#disputeButtonTemplate').html()) }],
           dataSource: {
              data: transactionData
           },
           columns: [
              { template: "<input type='checkbox' class='checkbox' />", width:"30px" },
           {
              field: "TransactionId",
              hidden: true
           },
           {
              field: "Transaction_Date",
              title: "Transaction Date",
     
           },
           {
              field: "Transction_Amount",
              title: "Transction Amount"
           },
           {
              field: "Merchant_Name",
              title: "Merchant Name"
           },
           {
              field: "Transaction_Description",
              title: "Transaction Description"
           },
           {
              field: "Balance",
              title: "Balance"
           }],
           noRecords: true,
           editable: false,
           sortable: true,
           reorderable: true,
           pageable: {
              pageSize: 20,
              previousNext: true,
              input: true,
              buttonCount: 5,
              pageSizes: [20, 30, 40, "all"],
              info: true,
              messages: {
                 page: "Enter page"
              }
           },
           filterable: {
              mode: "menu",
              ignoreCase: true,
              operators: {
                 string: {
                    eq: "Equal to",
                    contains: "Contains",
                    startswith: "Begins with"
                 },
                 date: {
                    eq: "Equal to",
                    gt: "After",
                    lt: "Before",
                    eq: "Equals",
                    gte: "After or equal to",
                    lte: "Before or equal to"
                 }
              }
           },
           pdf: {
              allPages: false,
              fileName: "Transactions.pdf"
           },
           excel: {
              fileName: "Transactions.xslx",
              filterable: true
           }
        }
     
     
        $scope.openDispute = function (size) {
           var modalInstance = $uibModal.open({
              templateUrl: 'DisputeTransactions.html',
              controller: 'DisputeTransactionCtrl',
              size: size
           });
        }
     
    });
    app
        .controller('DisputeTransactionCtrl', function ($scope, $uibModalInstance) {
     
     
           //var editor = $("#previousNotes").data("kendoEditor"),
              //editorBody = $(editor.body);
     
           //// make readonly
           //editorBody.removeAttr("contenteditable").find("a").on("click.readonly", false);
     
           $("#previousNotes").kendoEditor({
              messages: {
                 wrapText: "Wrap text"
              }
           });
     
           $("#newNote").kendoEditor({
              messages: {
                 wrapText: "Wrap text"
              }
           });
     
          $scope.ok = function () {
             $uibModalInstance.close();
          };
     
          $scope.cancel = function () {
             $uibModalInstance.dismiss('cancel');
          };
     
          $scope.html = "<h1>Kendo Editor</h1>\n\n" +
             "<p>Note that 'change' is triggered when the editor loses focus.\n" +
             "<br /> That's when the Angular scope gets updated.</p>";
     
          $scope.$on("kendoWidgetCreated", function (event, widget) {
             console.log(widget.element);
     
             if (widget === $scope.txtNarrative) {
                debugger;
                console.log("Found narrative widget...");
                $($("#txtNarrative").data().kendoEditor.body).attr("contenteditable", false);
             }
     
             var editor = $('#txtNarrative').data('kendoEditor');
     
             if (editor !== undefined) {
                editor.body.contentEditable = false;
                $('.k-editor-toolbar').hide();
             }
          });
      });
  13. Ianko
    Admin
    Ianko avatar
    1729 posts

    Posted 08 Jun Link to this post

    Hello Adam,

     

    It would be very helpful if you can isolate the case in a simple dojo (http://dojo.telerik.com/) so that we can take a better look. With only the code shared it is difficult to exactly define what might be the exact reason for the suggested approach not to work in your case. 

     

    Regards,
    Ianko
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top