1. Home
  2. Forum
  3. React - EJ 2
  4. TypeError: Cannot read property 'className' of null

TypeError: Cannot read property 'className' of null

Hi, I am using react schedular in  a project. There is the following error when we double click on a cell to open editor window. This problem appears only in one case If we double click on a empty cell then we double click on a cell with saved appointment then this error appears "TypeError: Cannot read property 'className' of null" and editor window is not opening. Please help.

Attachment: SchedularComponent_d79fe457.zip

7 Replies 1 reply marked as answer
RV Ravikumar Venkatesan Syncfusion Team June 15, 2020 04:31 PM UTC

Hi Suman, 
  
Greetings from Syncfusion support. 
  
We have validated your reported query “TypeError: Cannot read property 'className' of null” at our end. We are able to reproduce the issue at our end. We have considered this as a defect and logged the below defect report at our end. The fix for the issue will be included in our Volume 2 main release which is scheduled to be rolled out by the end of June 2020. You can track this defect status in the below feedback link. 
  
  
Please get back to us if you need any further assistance. 
  
Regards, 
Ravikumar Venkatesan 


EU Eugene August 25, 2020 07:41 AM UTC

Hello. I'm facing the same bug. This is pretty critical one. Can you suggest a workaround while fix is not released yet?

RV Ravikumar Venkatesan Syncfusion Team August 27, 2020 04:24 AM UTC

Hi Eugene, 

Greetings from Syncfusion support. 

We have validated your reported query at our end. The fix for the reported issue scheduled for our next patch release. The reported issue only happening if we using the RecurrenceEditorComponent in the editor template. So, we have prepared a workaround sample with the help of the below code and it can be available below. 

[index.js] 
import { RecurrenceEditor } from '@syncfusion/ej2-schedule'; 
 
export class EditorTemplate extends SampleBase { 
  constructor() { 
    super(...arguments); 
    this.data = extend([], dataSource.doctorsEventData, null, true); 
  } 
 
  onPopupOpen(args) { 
    if (args.type === "Editor") { 
      let recurElement = args.element.querySelector('#RecurrenceRule'); 
      if (!recurElement.classList.contains('e-recurrenceeditor')) { 
        let recurrObject = new RecurrenceEditor({}); 
        recurrObject.appendTo(recurElement); 
        this.scheduleObj.setRecurrenceEditor(recurrObject); 
      } 
      document.getElementById('RecurrenceRule').style.display = (this.scheduleObj.currentAction == "EditOccurrence") ? 'none' : 'block'; 
    } 
  } 
 
  editorTemplate(props) { 
    return ((props !== undefined) ? ( 
      <table className="custom-event-editor" style={{ width: "100%" }}> 
        <tbody> 
          <tr><td className="e-textlabel">Recurrence</td><td colSpan={4}> 
            <div id='RecurrenceRule' data-name="RecurrenceRule"></div> 
          </td></tr> 
        </tbody> 
      </table>) : (<div></div>)); 
  } 
  render() { 
    return (<div className='schedule-control-section'> 
      <div className='col-lg-12 control-section'> 
        <div className='control-wrapper'> 
          <ScheduleComponent  ref={schedule => this.scheduleObj = schedule} editorTemplate={this.editorTemplate.bind(this)} popupOpen={this.onPopupOpen.bind(this)} > 
          </ScheduleComponent> 
        </div> 
      </div> 
    </div>); 
  } 
} 
 
render(<EditorTemplate />, document.getElementById('sample')); 


Kindly try the above sample and get back to us if you need any further assistance. 

Regards, 
Ravikumar Venkatesan 


Marked as answer
SK Suman Kumar September 24, 2020 08:09 AM UTC

Hi , In the same schedular when I update or create new entry it is giving this error . Please help.

Attachment: Screenshot_from_20200924_133426_8141bdc6.zip

RV Ravikumar Venkatesan Syncfusion Team September 25, 2020 10:30 AM UTC

Hi Suman, 

Thanks for the update. 

The fix for your reported issue is scheduled to roll out in our volume 3 release which is scheduled to be rolled out at the end of September 2020. In meantime we suggest you use the previously shared work-around. 

Please let us know if you need any further assistance. 

Regards, 
Ravikumar Venkatesan 


SK Suman Kumar September 25, 2020 02:01 PM UTC

OK I have changed it with custom modal form, I have a question I want to get the selected date when user clicks on cell in Schedular. I have to pass the dates to set the initial values in the form. Already tried popupOpen where I got those values but not able to pass it to form component. I will give sample. I want the datetime value of clicked cell.
I have to pass it in "content" method. 

Attachment: demo_b46c54ab.zip

RV Ravikumar Venkatesan Syncfusion Team September 28, 2020 03:56 PM UTC

Hi Suman, 
  
Thanks for the update. 
  
We have validated your requirement at our end. We have passed the start and end date of the clicked cell to the content method with the help of the below code changes in your shared sample. We have modified your shared-sample and it can be available below. 
  
  
[LessonPage.js] 
  onPopupOpen = (args) => { 
    this.startTime = args.data.startTime; 
    this.endTime = args.data.endTime; 
    if (args.type === "Editor") { 
      args.cancel = true; 
      if (args.target.classList.contains("e-appointment")) { 
        this.dialogInstance.header = "Update Class"; 
        this.temp = false; 
        this.id = args.data.Id; 
      } else { 
        this.dialogInstance.header = "Create Class"; 
        this.temp = true; 
        this.dialogInstance.show(); 
        this.dialogInstance.content = this.content({start: args.data.startTime, end: args.data.endTime}); 
      } 
    } 
  }; 
  
Note: We suggest you use the editorTemplate to customized the schedule editor window like the below-shared sample. 
  
  
Kindly try the above sample and get back to us if you need any further assistance. 
  
Regards, 
Ravikumar Venkatesan 


Loader.
Up arrow icon