Telerik Map Marker - Tooltip Refresh data on-hover

[Brad]

We have a Telerik Map object on a view, and the map displays several markers which is working perfectly. Each marker has a tooltip configured to "LoadContentFromAjax", so when the user hovers over the marker (for the first time), the API is queried and the correct data is returned.

The problem is that the Markers Tooltip data is only loaded the first time the user hovers over the icon after the page loads. once that first hover has occurred, the existing data is displayed until the page is reloaded.

I have attempted to refresh the data using the marker tooltips "Show" event, but so far i have had no luck.

This is my onShow event that is called anytime the Marker is hovered over

function tooltip_OnShow(e) {
    console.log(e);
    e.sender.marker.dataItem.refresh();
}

the "e.sender.marker.dataItem.refresh()" just throws an exception. I have tried several different iterations, with no luck so far.

[Martin]

Hello, Brad,

Could you please try to modify this Dojo example to reproduce the issue you are experiencing? The provided information and code snippets do not help me to completely understand the scenario.

Looking forward to your reply.

Regards,
Martin
Progress Telerik

[Brad]

Martin, 

I have a map object on a page, similar to this

@(Html.Kendo().Map()
    .Name("map_" + Model.UId + "_" + Model.FId)
    .Zoom(2)
    .MaxZoom(3)
    .Wraparound(false)
    .Layers(layers =>
    {
        layers.Add()
            .Type(MapLayerType.Tile)
            .UrlTemplate("/images/map_tiles/" + Model.UId + "_" + Model.FId+"/tile_#= zoom #_#= x #-#= y #.png");

        layers.Add()
            .Type(MapLayerType.Marker)
            .DataSource(dataSource => dataSource
                .Read(read => read.Action("Retrieve_AllConfiguredMarkers", "Map", new { uId = Model.UId, Id = Model.FId })))
            .LocationField("latlng")
            .TitleField("name")
            .Tooltip(tooltip =>
            {
                tooltip
                    .Animation(animate =>
                    {
                        animate.Open(open => open.Fade(FadeDirection.In))
                            .Close(close => close.Fade(FadeDirection.Out));
                    })
                    .AutoHide(false)
                    .Events(ev =>
                    {
                        ev.Hide("toolTip_OnHide")
                            .Show("tooltip_OnShow")
                            .ContentLoad("tooltip_ContentLoad")
                            .RequestStart("tooltip_RequestStart");
                    })
                    .ContentTemplateId("getPopupTemplate")
                    .LoadContentFrom("GetMarkerToolipData", "Map");
            });
    })
    .Events(evnt =>
    {
        evnt.MarkerActivate("markerActivated");
        evnt.MarkerCreated("markerCreated");
        evnt.MarkerClick("markerClicked");
    })
    )

The map loads and works *perfectly* the *ONLY* problem we are experiencing is:

When an end-user hover's over an icon (marker), The "LoadContentFrom" is called only 1 time after page-load instead of loading each time the user hovers over the icon (marker)... I need the data to be refreshed/loaded every time the user hovers over the marker.

In an attempt to force the tooltip to refresh on hover, I added this code

Note: the RequestStart and ContentLoad just print console information, nothing more.

function tooltip_RequestStart(e) {
    console.log("restart start");
}

function tooltip_ContentLoad(e) {
    console.log("content load");
}

function tooltip_OnShow(e) {
    console.log("show tool tip");
    var tooltipObj = $(e).kendoTooltip().data("kendoTooltip");
    tooltipObj.refresh();
}

Note: the OnShow event is supposed to call ".refresh()" on the tooltip, but this does not happen. Also as shown in the original post, the code

function tooltip_OnShow(e) {
    console.log(e);
    e.sender.marker.dataItem.refresh();
}

was also tried but failed to refresh on hover.

I hope this helps!

[Martin]

Could you please try e.sender.refresh() instead? 

[Brad]

Martin, I just tested that out and I can confirm that the code below, resolves my issue.

function tooltip_OnShow(e) {
    e.sender.refresh();
}

 

Now, every time a user hovers over a marker icon on the map, the LoadContentFrom controller is called and the data is loaded-fresh each time.

Thank you for your assistance!

[Martin]

Hi, Brad,

I am glad to hear the issue is resolved. Come back to us whenever you have further issues.