Disable, Readonly and MaxLength for KendoEditor

[Chris]

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)

[Iliana Dyankova]

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

[Raymond]

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?

[Iliana Dyankova]

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

 

 

[Raymond]

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

[Raymond]

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?

[Iliana Dyankova]

Hi Ray,

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

Regards,
Iliana Nikolova
Telerik

 

 

[Raymond]

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.

[Iliana Dyankova]

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

 

 

[Raymond]

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

[Adam]

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();
         }
      });
  });

[Ianko]

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

[Mark]

I know this is old but since there still isn't any built-in way to disable the editor I wanted to add that it's easy to set the opacity as well.

var editor = $("#editor");
$(editor.data().kendoEditor.body).attr("contenteditable", false);
$(editor.data().kendoEditor.body).css("opacity", 0.5);
editor.getKendoEditor().toolbar.element.css("opacity", 0.5);

[Ianko]

Hello Mark,

Thanks for sharing this approach! Looks great!

Regards,
Ianko
Progress Telerik