Binding JSON content to ToolTip

[Mike]

Been trying to determine the correct configuration using tag helpers for the tool tip and so far, documentation nor demos have helped. According to docs, the "content" property could call a script which does not seem to work.  Using the property "context-hander" does but ten the template set does not work.  GetPersonData below returns a JSON object with one property: EmployeeId.

 

 

HTML

<div>
    <span id="PersonInfo" class="fas fa-info-circle"> </span>
    <kendo-tooltip name="PersonInfo" position="bottom" width="300" height="300" content-handler="GetPersonData" content-template-id="PersonTooltipTemplate"></kendo-tooltip>
</div>

 

JS

 

function GetPersonData(e)
{
    var personId = document.getElementById("hidPersonId").value;

    $.ajax(
        {
            async: true,
            url: "",
            data: { id: personId },
            contentType: "application/json",
            success: function (data)
            {
                return data;   //{ EmployeeId: "12345" }
            },
            error: function (errorThrown)
            {
                console.log("bad");
                console.log(errorThrown);
            }
        });
}

<script type="text/x-kendo-template" id="PersonTooltipTemplate">
    <div class="d-flex">
        <div class="col-12 col-md-4 col-lg-4 col-xl-4 order-0">
            <label class="control-label">Employee Id</label>
        </div>
        <div class="col-12 col-md-4 col-lg-4 col-xl-4 order-1">
            #= data.EmployeeId #
        </div>
    </div>
</script>

[Veselin Tsvetanov]

Hi Mike,

The content-handler call is expected to return the entire content for the Tooltip. That would be the compiled template and not only the data to be populated in that template. To do so you will need to alter the GetPersondata() call to the following:

function GetPersonData(e) {
        // I am using local data instead of the obtained from the remote
	var data = { EmployeeId: "12345" };
	var template = kendo.template($('#PersonTooltipTemplate').html());
	var result = template(data);

	return result;
}

With the above, the Tooltip declaration could be reduced to:

<kendo-tooltip name="PersonInfo" 
			   position="bottom" 
			   width="300" 
			   height="300"
			   content-handler="GetPersonData"></kendo-tooltip>

Attached you will find a small sample implementing the suggested.

Regards,
Veselin Tsvetanov
Progress Telerik

[Mike]

Using this approach, I verified:

1. data returned in a JSON format

2. the template HTML was found

3. data was applied to the HTML and valid HTML is produced.

<div>002553</div>

 

The only problem now is the popup is completely blank.

[Veselin Tsvetanov]

Hello Mike,

Could you, please, modify the sample attached to my previous reply, so that it replicates the blank Tooltip issue observed at your end, and send it back to me? This way I will be able to troubleshoot the problem locally and to provide you the most appropriate assistance on that case.

Regards,
Veselin Tsvetanov
Progress Telerik

[Mike]

I've been unable to replicate the problem on your sample project. I'm going to have to throw my hands up as for whatever reason, the data will not render on my main project.

[Veselin Tsvetanov]

Hi Mike,

In order to isolate the issue faced in your own project, I would suggest you compare carefully its implementation with the one form the sample discussed. This way you will be able to identify any differences between those, which might allow you to identify the cause for the issue observed.

Another suggestion I could give you is to remove all styles from the project that are not the Kendo official themes. For some reason, those might be hiding the Tooltip content.

Regards,
Veselin Tsvetanov
Progress Telerik