search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Bubble doesn't show and onClick event isn't fired in onBeforeCellRender

Asked by Anonymous
8 days ago.

I'm using the Area object in the onBeforeCellRender to draw a red circel indicating the existing of a comment (s. attached screenshot). This works fine, however I'm struggling with showing the bubble and the onClick event doesn't fire either. Am I doing something wrong?

onBeforeCellRender: (args) => {
      this.setDaysColor(args);

      let comments = this.data.find(d => d.personId == args.cell.resource);

      let comment = comments.commentEntries.find(c => args.cell.start.equals(new DayPilot.Date(c.date)));

      if (comment) {
        let isEditable = !this.personService.CurrentPerson.isDateLocked(moment(args.cell.start.value))
          && comment.allowModify

        args.cell.properties.areas = [
          {
            onClick: (args) => {
              if (isEditable) {
                this.showCommentDialog(args);
              }
            },
            action: 'Bubble',
            bubble: new DayPilot.Bubble({
              zIndex: 500,
              onLoad: (args) => { args.html = comment.comment; console.log(comment.comment)}
            }),
            height: 6,
            width: 6,
            visibility: "Visible",
            bottom: 1,
            left: 1,
            style: "border: 1px solid red; border-radius: 5px; box-sizing: border-box; background-color: red;"
          }
        ];
      }
    },
Answer posted by Dan Letecky [DayPilot]
8 days ago.

The onClick handler seems to work fine. Areas with action: "Bubble" were not supported in Scheduler cells until now - but it should be enabled in the latest sandbox build (2021.4.5153).

Please let me know if the problem persists.

Comment posted by Anonymous
7 days ago.

Both still doesn't work, even with latest sandbox build (2021.4.5153).

Comment posted by Dan Letecky [DayPilot]
7 days ago.

I've tested the following example and it works fine:

dp.onBeforeCellRender = args => {
    args.cell.areas = [
        {
            onClick: (args) => {
                alert("test");
            },
            action: 'Bubble',
            bubble: new DayPilot.Bubble({
                // zIndex: 500,
                onLoad: (args) => { args.html = "test"; }
            }),
            height: 6,
            width: 6,
            visibility: "Visible",
            bottom: 1,
            left: 1,
            style: "border: 1px solid red; border-radius: 5px; box-sizing: border-box; background-color: red;"
        }
    ];
};

I'm not sure if this is the problem but in your screenshot there is an active time range selection - that is displayed above cells and blocks access to the background.

Comment posted by Anonymous
7 days ago.
It's because of the this setting
crosshairType: 'Full'

If I remove it, then it works as expected. I assume this is a bug?
Comment posted by Dan Letecky [DayPilot]
7 days ago.

Thanks for the update.

The full crosshair is displayed on top of the grid and it blocks access to the underlying cells. There is no way around that so I recommend switching to the header-only crosshair if you want to include custom active areas in the grid cells.

Comment posted by Anonymous
7 days ago.

Unfortunately this is not an option for me. Is there another way to show this red circle in an empty cell? A Workaround?

Comment posted by Dan Letecky [DayPilot]
7 days ago.

You might be able to display the red dot as an event. Events are displayed above the crosshair DOM elements.

Take a look at the following tutorial to see how to force a specific event position:

https://code.daypilot.org/91222/javascript-scheduler-event-placement-strategies

You can either reserve line 0 for the red dot events or if there are no concurrent events you can use line 1 (at the bottom of the cell).

You'd have to customize the event: set smaller height, disable drag and drop, etc. See the event properties:
https://api.daypilot.org/daypilot-event-data/

You can also try setting z-index for the active area but that would probably produce undesirable visual effects.

Answer posted by Anonymous
4 days ago.

I did it using event as you suggested and it works fine. Thanks

New Reply
This reply is
Your name (optional):