Is there a way to NOT close QuickInfo popup when clicking away?

[Shan Du]

Hi there,

I'm using the Schedule component and currently I have a MUI MultiSelect component inside the quick-info popup, but whenever I actually click an option from the Select dropdown list, the quick info popup closes, probably because it thinks I clicked outside of quick info popup.

Is this a bug? 

Would using the MultiSelect component provided by SyncFusion have the same issue?

Lastly, is there a work-around to this?

Thank you for your time!

Shan

[Balasubramanian Sattanathan]

Hi Shan,

Let you know that when we choose the option of MultiSelect component inside the quick-popup, the dropdown only will be closed not an entire popup. We have prepared a sample that will illustrate based on your query.

Sample: https://stackblitz.com/edit/react-hokn7e-kqyeqg?file=index.js
Output: 

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

Regards,
Balasubramanian S

[Shan Du]

Hi Bala,

Thank you for providing the sample, it seems all the dropdown components from SyncFusion would work (e.g. DatePicker, MultiSelect, etc.) which is great! But since we have many existing custom components written using standard Material UI components, if we go with SyncFusion components, we would have to re-write a lot of components, so it would be our last resort option if there's absolutely no other way.

So my questions here are:

1. Do you know if this issue is an actual bug on QuickInfo popup?
2. Do you know if we can open an editor template on single click instead of double click? 
   1. If it's possible, how would you customize the editor template header & footer?
   2. If not, do you know if there's another work-around to this problem?

Simplified Code Example using MUI Selector, which does NOT work:

import Select from '@material-ui/core/Select'

import MenuItem from '@material-ui/core/MenuItem'

import Input from '@material-ui/core/Input'

// add the following to the QuickInfoTemplate

// once popup opens, if you select an option, the popup would close

<Select

id="demo-customized-select"

value=""

onChange={() => {}}

input={<Input />}

>

<MenuItem value="">None<MenuItem>

<MenuItem value={10}>TenMenuItem>

<MenuItem value={20}>TwentyMenuItem>

<MenuItem value={30}>ThirtyMenuItem>

Select>

[Balasubramanian Sattanathan]

Hi Shan,

1. Do you know if this issue is an actual bug on QuickInfo popup?

We let you know that your mentioned issue is not a bug from our end. Since it's working properly. You can refer to our previous post.

2. Do you know if we can open an editor template on single click instead of double click?

Yes. You can have the editor window with a single click. Kindly refer to the below UG.
https://ej2.syncfusion.com/react/documentation/schedule/how-to/open-event-editor-manually/#open-editor-window-on-single-click

3. If it's possible, how would you customize the editor template header & footer?
By following the below sample, you can customize the editor window header and footer with the help of the popupOpen event and its Editor type.. And we can customize the editor window content by using the editorTemplate property of the Scheduler.

Code snippet:

onPopupOpen(args) {

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

    // Create div element.

    var div = document.createElement('div');

    // Create anchor element.

    var a = document.createElement('a');

    // Create the text node for anchor element.

    var link = document.createTextNode("This is link");

    // Append the text node to anchor element.

    a.appendChild(link);

    // Set the title.

    a.title = "This is Link";

    // Set the rel='nofollow' href property.

    a.rel='nofollow' href = "https://ej2.syncfusion.com/react/documentation/schedule/editor-template/";

    // Append the anchor element to the div element.

    div.appendChild(a);

    div.style = "padding-left: 100px;font-size: 15px;"

 

    // You can append the div element to the editor window header

    args.element.querySelector('.e-dlg-header-content .e-dlg-header').appendChild(div);

  }

}

Sample: https://stackblitz.com/edit/react-hokn7e-sd2mxf?file=index.js
UG: https://ej2.syncfusion.com/react/documentation/schedule/editor-template/

Kindly refer to the above solution and let us know if this is helpful.

Regards,
Balasubramanian S

[Shan Du]

Hi Bala

Thank you again for the awesome responses! They help me a lot in solving this issue, these documentations were a little bit hard to find, but I'm glad you pointed me to them!

Just one last Q regarding modifying the editor header/footer, regarding this line:

args.element.querySelector('.e-dlg-header-content .e-dlg-header').appendChild(div);

1. Looks like you are appending a div to the header, but if i want to completely remove the header & footer elements from the DOM, would that break anything under the hood?
2. Unrelated to this topic, I realize there are 2 diff documentations for the same component, which one should we follow?
   1. https://ej2.syncfusion.com/react/documentation/schedule/ 
   2. https://ej2.syncfusion.com/react/documentation/api/schedule/  
      

Shan

[Balasubramanian Sattanathan]

Hi Shan,

Looks like you are appending a div to the header, but if i want to completely remove the header & footer elements from the DOM, would that break anything under the hood?

We can hide/remove the editor window's header and footer by using the below code snippets.

onPopupOpen(args) {

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

    // If you want to hide the header and footer, you can use the below codes

    args.element.querySelector('.e-dlg-header-content').style.display = 'none';

    args.element.querySelector('.e-footer-content').style.display = 'none';

    // If you want to remove the header and footer elements from DOM, you can use the below codes

    // args.element.querySelector('.e-dlg-header-content').remove();

    // args.element.querySelector('.e-footer-content').remove();

  }

}

Modified sample: https://stackblitz.com/edit/react-hokn7e-dd7ang?file=index.js

Unrelated to this topic, I realize there are 2 diff documentations for the same component, which one should we follow?
We let you know that the below link is the UG documentation for the Scheduler.
UG: https://ej2.syncfusion.com/react/documentation/schedule/getting-started/

And the below link is used to know the Scheduler APIs.
API: https://ej2.syncfusion.com/react/documentation/api/schedule/

Kindly let us know if this is helpful.

Regards,

Balasubramanian S

[Shan Du]

Hi Bala

Thank you so much again for the quick & detailed response, your answers & examples are very helpful and I really appreciate your patience & responsiveness! ⭐️⭐️⭐️⭐️⭐️

This is one of the best support forum I've participated in 👍

Shan

[Shan Du]

HI Bala,

Purely just a FYI, it seems that you can't really remove the editor header/footer element like this:

    args.element.querySelector('.e-dlg-header-content').remove();
    args.element.querySelector('.e-footer-content').remove();

Once those elements are removed, you won't be able to open the editor again, and will get the following JS error:

Uncaught TypeError: Cannot read properties of null (reading 'className')

This is probably due to SyncFusion codebase is trying to access those elements for some reason but they were  removed permenantly.

Just I thought you should know this =)

[Balasubramanian Sattanathan]

Hi Shan,

Thank you for your appreciation.

We would suggest you to use the below code snippet to remove the header and footer part of the editor window.

Code snippet:

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

  // If you want to hide the header and footer, you can use the below codes

  args.element.querySelector('.e-dlg-header-content').style.display = 'none';

  if (args.element.querySelector('.e-footer-content')) {

    args.element.querySelector('.e-footer-content').remove();

  }

}

Note: Kindly hide the header part instead of removing it if possible, for your requirement.

Regards,

Balasubramanian S

[Shan Du]

Hi Bala, hiding the header/footer is totally fine on my part, thank you for the help!

[Vengatesh Maniraj]

You are most welcome!!!