ej2_instances is undefined

[Gabriel]

Hi syncfusion team, 

my codebase is nearly the same (at least very similiar) to the following example for form validation: https://ej2.syncfusion.com/react/documentation/schedule/editor-template/#apply-validations-on-editor-template-fields

Unfortunately the 'ej2_instances' property is 'undefined'  and therefore throws an error: 

let formElement = args.element.querySelector('.e-schedule-form');​
let validator = formElement.ej2_instances[0];

 The seletion works and also the form Element can be accessed. The only problem seems to be that the 'ej2_instances' property doesnt exists.

Thanks in Advance,

Gabriel

[Satheesh Kumar Balasubramanian]

Hi Gabriel, 

  

Thanks for using Syncfusion Products. 

  

We have prepared sample to reproduce the reported issue. But, we were unable to reproduce the reported issue at our end. We have accessed the instance in popupOpen event while opening editor window. 

  

Sample: https://stackblitz.com/edit/react-schedule-instance-undefined?file=index.js 

  

Could you please share the below details to reproduce the issue? This will help to validate the issue and provide prompt solution at earliest. 

• Did you try to get in instance in popupOpen event?
• If yes, please share the popupOpen event related codes
• Replicate the issue in above sample if possible

Regards,

Satheesh Kumar B

[Gabriel]

Hi,​​

my code regarding the popupOpen eventlistener inside the ScheduleComponent. I have only copied the relevant part, the rest is unimportant: 

<ScheduleComponent ref={schedulerRef} timeFormat='HH:mm' currentView='Week' weekRule='FirstFullWeek'

popupOpen={(args: any) => {

if (args.type === "Editor") {

console.log("Args: ")

console.log(args)

console.log("ej2_instances: ")

console.log(args.element.querySelector(".e-schedule-form").ej2_instances)

let form = args.element.querySelector(".e-schedule-form")

}}

...

The output of the logging can you see in the added files. 

Attachment: Screenshot_from_20220103_1518_a213e50a.zip

[Satheesh Kumar Balasubramanian]

Hi Gabriel,

Thanks for your update.

We let you know that you didn't get the form instance properly which is the cause for the reported problem. We have prepared a sample to get form instance for your reference.

Sample: https://stackblitz.com/edit/react-schedule-instance-undefined-9oxi1x?file=index.js

index.js: 

            <ScheduleComponent

              width="100%"

              height="650px"

              selectedDate={new Date(2021, 1, 15)}

              ref={(schedule) => (this.scheduleObj = schedule)}

              eventSettings={{ dataSource: this.data }}

              editorTemplate={this.editorTemplate.bind(this)}

              actionBegin={this.onActionBegin.bind(this)}

              showQuickInfo={false}

              eventRendered={this.onEventRendered.bind(this)}

              popupOpen={ function(args) {

                if (args.type === 'Editor') {

                  console.log('Args: ');

                  console.log(args);

                  let formObj = args.element.querySelector('.e-schedule-form').ej2_instances[0];

                  console.log(formObj);

                }

              }}

            >

Kindly refer the above sample and let us know if this resolves your problem.

Regards,
Satheesh Kumar B

[Gabriel]

Hi,

your sample is basically the same as my code. It doesnt matter whether i access the index 0 or not. The array is still undefined. 

Regards,

Gabriel

[Satheesh Kumar Balasubramanian]

Hi Gabriel, 

  

We need more details for our clarification. So please share the below details that would be helpful for us to provide better solution. 

• Replicate the issue in previously shared sample or share issue replicating sample if possible
• Share all schedule related code snippets

  

Regards, 

Satheesh Kumar B 

[Gabriel]

I was trying to replicate the issue but did not succeed. After that i updated my version from 19.3.55 to 19.4.40 in case that had something to do with the issue, but it did not. 

I then tried to implement the validation using the 'FormValidator' and it works now.

But it was weird, because the 'ej2_instances' property was accessable in every element (at least in the parent elemnts) except in the 'e-schedule-form'.

I have changed the sample to fit my code (only the part that really was influencing the scheduler) if you want to have a look, although it just works fine in there. 

Nevertheless thanks,

Gabriel

[Vengatesh Maniraj]

Hi Gabriel,

Thanks for the update. 

Could you please confirm our latest version has resolved your problem?

Regards,

Vengatesh