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

Asked by Anonymous
3 years 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;"
          }
        ];
      }
    },

how-to javascript

25-11-2021-23-18-59.png

Answer posted by Dan Letecky [DayPilot]
3 years 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
3 years ago.

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

Comment posted by Dan Letecky [DayPilot]
3 years 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
3 years 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]
3 years 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
3 years 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]
3 years 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
3 years ago.

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

This question is more than 1 months old and has been closed. Please create a new question if you have anything to add.

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

Products

Learn

Get Support

DayPilot Pro