We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Close quickinfo Template programatically

I have looked at this forum https://www.syncfusion.com/forums/157722/close-quickinfo-template-programatically but not suitable for me because I am using React. May I know how to close quickinfo template

programmatically in react? Below is my existing coding:







1 Reply

SR Swathi Ravi Syncfusion Team December 27, 2022 12:28 PM UTC

Hi ONG CHEE,


You can manually close the quickinfo popup by using the Schedule's closeQuickInfoPopup method, as shown in the snippet below.


Sample: https://stackblitz.com/edit/react-xxwdhi-2j8nsj?file=index.js

Api: https://ej2.syncfusion.com/react/documentation/api/schedule/#closequickinfopopup


[index.js]

 function ClosePopupClick(e) {

    scheduleObj.closeQuickInfoPopup();

  }

function headerTemplate(props) {

    return (

      <div className="quick-info-header">

        <div

          className="quick-info-header-content"

          style={getHeaderStyles(props)}

        >

          <div className="quick-info-title">{getHeaderTitle(props)}</div>

          <div className="duration-text">{getHeaderDetails(props)}</div>

          <button id="button" onClick={ClosePopupClick.bind(this)}> close</button>

        </div>

      </div>

    );

  }


Regards,

Swathi Ravi



Loader.
Live Chat Icon For mobile
Up arrow icon