Our blazing fast Grid component built with pure JavaScript


Post by henrikbackman »

Hi,

We use feature "eventTooltip" and "tooltipRenderer" making async calls to a service before showing the tooltip contents. After upgrading to 2.1.X the tooltip just blinks and makes like 30 requests per seconds. Is this a bug or should we change something?

Post by mats »

How do we reproduce this? Can you reproduce this in our samples anywhere?

Post by henrikbackman »

I can't seem to reproduce the issue in your code. Here is my try:
import { Scheduler,DateHelper } from '../../build/scheduler.module.js?433475';
import shared from '../_shared/shared.module.js?433475';
/* eslint-disable no-unused-vars */

//region Data

var _handleRemoteTooltip = function(tip) {
  fetch('https://jsonplaceholder.typicode.com/todos/1')
    .then(function(response) {
      return response.json();
    })
    .then(function(json) {
      var old;

      tip.html = json.title;

      old = tip.getHtml;

      tip.getHtml = null;
      tip.realign();
      tip.getHtml = old;
    });
  
  return false;
};

let resources = [
        { id : 'r1', name : 'Mike', image : 'mike.jpg' },
        { id : 'r2', name : 'Celia', image : 'celia.jpg' },
    ],
    events    = [
        {
            resourceId   : 'r1',
            startDate    : new Date(2017, 0, 1, 10),
            duration     : 2,
            durationUnit : 'h',
            name         : 'Review website',
            note         : `<a href="//www.google.com" target="_blank">Link to website</a>`,
            iconCls      : 'b-fa b-fa-mouse-pointer'
        },
        {
            resourceId   : 'r2',
            startDate    : new Date(2017, 0, 1, 12),
            duration     : 1.5,
            durationUnit : 'h',
            name         : 'Bryntum onsite meeting',
            note         : '<a href="https://www.google.se/maps/place/Bryntum/@59.3340293,18.0662579,15z/data=!4m2!3m1!1s0x0:0xc76e8fef322e5c57?ved=2ahUKEwiche7e0aveAhXRh6YKHUoLDvcQ_BIwDXoECAcQCw" target="_blank"><i style="margin-right:5px" class="b-fa b-fa-globe"></i>Map link</a>',
            iconCls      : 'b-fa b-fa-arrows'
        },
    ];

//endregion

let scheduler = new Scheduler({
    appendTo   : 'container',
    minHeight  : '20em',
    resources  : resources,
    events     : events,
    startDate  : new Date(2017, 0, 1, 6),
    endDate    : new Date(2017, 0, 1, 20),
    viewPreset : 'hourAndDay',

    features : {
        eventTooltip : {
            hideOnDelegateChange: true,
            hoverDelay:           700,
            showOnHover:          false,
            template: function(data) {
                return _handleRemoteTooltip(data.tip);
            },
        }
    },

    columns : [
        { text : 'Name', field : 'name', width : 130 }
    ]
});
That is basically the exact way we use it. Is there another way that you think is better?

Post by pmiklashevich »

EventTooltip feature doesn't support showing async content. The way you implemented it looks more like a workaround than a proper solution. And I can see the blinking you described. I've created a feature request to support it out of the box. https://app.assembla.com/spaces/bryntum/tickets/8775-add-async-tooltip-support-to-eventtooltip-feature/details

Though our Tooltip widget supports async content. So I would recommend to implement your own tooltip and turn of our feature which is enabled by default. Here is a proof of concept, you can try in our Basic demo.
const tip = new Tooltip({
    forSelector : '.b-sch-event',
    listeners   : {
        beforeShow : ({ source : tip }) => {
            tip.html = false;

            fetch('https://jsonplaceholder.typicode.com/todos/1')
                .then(function(response) {
                    return response.json();
                })
                .then(function(json) {
                    tip.html = json.title;
                });
        }
    }
});

let scheduler = new Scheduler({
    features : {
        eventTooltip : false
    },
    ....
Let me know please how it works for you!

Cheers,
Pavel

Pavlo Miklashevych
Sr. Frontend Developer


Post by henrikbackman »

Pavel, that works so thanks! Just a question, I use the 'anchoredTo' inside the source to get a url to perform the request, but that doesn't seem to excist the first time I hover over an event after the page was loaded. It there something I'm missing?

Post by pmiklashevich »

Please use activeTarget to get event record from DOM element.
const tip = new Tooltip({
    forSelector : '.b-sch-event',
    listeners   : {
        beforeShow : ({ source : tip }) => {
            const eventRecord = scheduler.resolveEventRecord(tip.activeTarget);
            ...

Pavlo Miklashevych
Sr. Frontend Developer


Post by henrikbackman »

Great! It's working as it should now. Thanks for the help.

Post by mats »

This will be much simpler and async event tooltips are supported out of the box with the next release.

Post Reply