onClick event are not firing in quickInfo template

[Safwen Daghsen]

Hi 
I wanted to add a custom button to the quickinfo template but onclick event arent firing :

const Schedule = ({ filteredResults }) => {

const content = ({

Id,

elementType,

Location,

}) => {

return (

<div>

{elementType === "cell" ? (

<div className="e-cell-content e-template">

<form className="e-schedule-form">

<div>

<input

className="subject e-field"

type="text"

name="Subject"

placeholder="Title"

/>

</div>

<div>

<input

className="location e-field"

type="text"

name="Location"

placeholder="Location"

/>

</div>

</form>

</div>

) : (

<div className="e-event-content e-template flex flex-col">

<div className="e-subject-wrap">

{Location && (

<div className="display-flex-x pt-6">

<div className="e-location-icon e-icons"></div>

<div className="location">{Location}</div>

</div>

)}

<button onClick={() => console.log("here)}>Join class</button>

</div>

)}

</div>

);

};

... return (<ScheduleComponent

className={styles.schedule}

cssClass="schedule-cell-dimension"

height="550px"

eventSettings={{ dataSource: filteredResults }}

eventRendered={(args) => cellTemplate(args)}

startHour="06:00"

endHour="23:30"

readonly={true}

firstDayOfWeek={1}

quickInfoTemplates={{

content: (e) => content(e),

}}

minDate={new Date(new Date().setDate(new Date().getDate() - 1))}

maxDate={getMaxDate()}

ref={(t) => (Schedule = t)}

rowAutoHeight={true}

>

<ViewsDirective>

<ViewDirective option="Week" />

<ViewDirective option="Agenda" allowVirtualScrolling={true} />

</ViewsDirective>

<Inject services={[Week, Agenda]} />

</ScheduleComponent>)

}

[Balasubramanian Sattanathan]

Hi Safwen, 

Greetings from Syncfusion Support. 

We have validated your reported scenario at our end and let you know that you have missed to add “(double quotes) at the end of the display string inside the log. Due to this, the click event isn’t fired when clicking the custom button. 

<button onClick={() => console.log("here")}>Join class</button> 

Sample: https://stackblitz.com/edit/react-quick-info-templates?file=index.js 

Kindly refer to the above solution and let us know if you need further assistance. 

Regards, 

Balasubramanian S

[Sudhanshu Jain]

Hi, 

 I am using follwing version of react and I am getting the same issue.

the button I am using in footer and added as: 

<Button type={buttonType} className={styles.cardButton}

onClick={() => console.log("test")}

isShadowVisible={true} disabled={disabled}>{title}

Button>

  "react": "17.0.1",

"react-dom": "17.0.1",

"react-redux": "7.2.1",

"react-router-dom": "5.2.0",

"redux": "4.0.5"

"@syncfusion/ej2-react-base": "17.2.34",

"@syncfusion/ej2-react-diagrams": "17.1.47",

"@syncfusion/ej2-react-gantt": "17.2.34",

"@syncfusion/ej2-react-navigations": "17.2.34",

"@syncfusion/ej2-react-popups": "17.2.34",

"@syncfusion/ej2-react-schedule": "17.2.34",

[Hareesh Balasubramanian]

Hi Sudhanshu, 

Thanks for the update. 

We have validated your query and suspect that the issue is due to using outdated packages of scheduler. We have checked the same scenario in our latest version which is working fine. So please try to upgrade the package. 

Sample: https://stackblitz.com/edit/react-quickinfo-template-sample?file=index.js  

UG link: https://ej2.syncfusion.com/react/documentation/schedule/editor-template/#customizing-quick-popups 

If you still facing the problem, please share the following details to validate the issue further. 

• Issue replicating sample
• Or replicate the issue in above sample
• Share entire quick info template related code snippets

Regards, 

Hareesh