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.
Up arrow icon