Read-only editor window

3 posts, 1 answers
  1. Erik
    Erik avatar
    42 posts
    Member since:
    Aug 2012

    Posted 10 Apr 2017 Link to this post

    When editing an event that has already occurred and not to recur again, the user should be able to see the Edit window but have everything disabled and read-only for viewing the details of the event but not allowed to make changes or save.

    What I have so far is after the logic for determining the event has ended and never to recur again to add the "k-state-disabled" class and set the pointer-events style to none so all controls in the k-edit-form-container are not clickable. This encompasses the entire edit window rather than explicitly disabling each and every control:

    function onEdit(e) {
       // custom logic...
       // if disabling editing then
       // * add telerik disabled class to show all controls as disabled
       // * set pointer-events style to prevent the controls from being active
       if (disableEditing) {
          $('.k-edit-form-container').addClass("k-state-disabled").css("pointer-events", "none");


    The only issue is the k-edit-form-container also includes the save and cancel buttons as well so the only way for the Edit form to be closed is the 'X' in the upper/right.  This causes a lot of confusion for our users since they do not initially understand the only way to close the window is the X and they often get "stuck" not knowing how to close it.

    Is there a more recommended way to disable the edit window to display read-only and also presenting a "Close" button?  I am using a customized template editor.





  2. Answer
    Veselin Tsvetanov
    Veselin Tsvetanov avatar
    1158 posts

    Posted 12 Apr 2017 Link to this post

    Hello Erik,

    I would suggest you to disable the ​data-containers of the edit fields instead of the entire Window content. Then you could also disable the Save and Delete buttons:
    edit: function(e) { 
      e.container.find('div[data-container-for]').addClass("k-state-disabled").css("pointer-events", "none");
      e.container.find('.k-scheduler-update').addClass("k-state-disabled").css("pointer-events", "none");
      e.container.find('.k-scheduler-delete').addClass("k-state-disabled").css("pointer-events", "none");

    Here you will find a Dojo sample, implementing the above.

    Veselin Tsvetanov
    Telerik by Progress
    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.
  3. Erik
    Erik avatar
    42 posts
    Member since:
    Aug 2012

    Posted 18 Apr 2017 in reply to Veselin Tsvetanov Link to this post

    Thanks you solution worked exactly as intended.

    One small addition to cover cases for when the recurrence editor controls are visible:

    e.container.find('.k-recur-view').addClass("k-state-disabled").css("pointer-events", "none");
Back to Top