Read-only editor window

[Erik]

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.

 

 

 

 

[Veselin Tsvetanov]

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.

Regards,
Veselin Tsvetanov
Telerik by Progress

[Erik]

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");