This is a migrated thread and some comments may be shown as answers.

Read-only editor window

2 Answers 77 Views
Scheduler
This is a migrated thread and some comments may be shown as answers.
Erik
Top achievements
Rank 1
Erik asked on 10 Apr 2017, 03:20 PM

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 Answers, 1 is accepted

Sort by
0
Accepted
Veselin Tsvetanov
Telerik team
answered on 12 Apr 2017, 10:47 AM
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
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.
0
Erik
Top achievements
Rank 1
answered on 18 Apr 2017, 05:40 PM

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");
Tags
Scheduler
Asked by
Erik
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Erik
Top achievements
Rank 1
Share this question
or