Bug Report T939951
Visible to All Users

Scheduler - The "Cannot read property 'option' of undefined" error occurs on an attempt to open the appointment popup for the second time if a form item is hidden in the onAppointmentFormOpening event handler

created 5 years ago (modified 5 years ago)

Steps to reproduce:

  1. Open this demo: https://js.devexpress.com/Demos/WidgetsGallery/Demo/Scheduler/Editing/jQuery/Light/
  2. Handle the onAppointmentFormOpening event and in the event handler add this code:
JavaScript
function onAppointmentFormOpening(data) { const form = data.form; form.itemOption("mainGroup.endDate", "visible", false); }
  1. Open the appointment form twice.

Expected behavior:
No errors in console.

Current behavior:
The "Cannot read property 'option' of undefined" error occurs

Additional information:
Sample project:
https://codepen.io/LexDevExpress/pen/yLJeLdw

Workaround - Hide a label and an editor instead of hiding the entire form item:

JavaScript
function onAppointmentFormOpening(data) { const form = data.form; form.itemOption("mainGroup.endDate", "label", { visible: false }); form.getEditor("endDate").option("visible", false); }

Answers approved by DevExpress Support

created 4 years ago

We checked this scenario and found that it is not correct to hide the entire form item in this scenario. Let me describe the situation in greater detail. We create the appointment form only once, when it is opened for the first time. Then, we work with the existing form. So, when you hide a form item, it may break the internal logic of other form items. For example, in this particulate case, the startDate and endDate items depend on each other, so when the endDate item is hidden, the issue occurs.
In such scenarios when you need to hide default items, the best way is to create the appointment form from scratch, so you won't depend on the implementation/limitations of the default form.

However, if you need to hide only one item, you can use the initial workaround:

JavaScript
function onAppointmentFormOpening(data) { const form = data.form; form.itemOption("mainGroup.endDate", "label", { visible: false }); form.getEditor("endDate").option("visible", false); }

For some frameworks this workaround may differ and require additional adjustments in complex scenarios. For example:
Vue:

JavaScript
onAppointmentFormOpening(data) { const form = data.form; this.$nextTick(() => { form.itemOption("mainGroup.endDate", "label", { visible: false }); form.getEditor("endDate").option("visible", false); }); }

We will add the information about this limitation to our documentation in the future.

    Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

    Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.