Refresh tooltip in grid

[Jokull]

Hi,

I'm trying to refresh tooltip in grid but it's not working. Here's what I'm doing:

I have an MVC Grid and I initialize the tooltip like this:

var tooltip = $("#classesAvailableGrid").kendoTooltip({
            filter: ".comment",
            position: "top",
            width: 180,
            content: function (e) {
                var dataItem = $('#classesAvailableGrid').data('kendoGrid').dataItem(e.target.closest('tr'));

                var id = dataItem["Id"];

                var text = $('#com-' + id).data('tooltiptext');

                return text;
            }
        }).data("tooltiptext");

This works fine.

The functionality I'm seeking is when I click the cell where I have the tooltip I prompt the user with a popup input field where he can update the tooltip message. On success I save the new message to database but then I want to update the tooltip as well. I am able to update the data attribute but the actual message that is displayed on hover is still the same.

var request = $.ajax({
            url: '/Controller/ActionMethod',
            type: 'POST',
            data: JSON.stringify(msg),
            contentType: 'application/json; charset=utf-8'
        }).success(function (data) {

            if (0 >= data.error.length) {
                if (data.icon) {
                    if (el.find('i').length) {
                        el.find('i').attr('data-tooltiptext', inputValue);

                        /*console.log(selectedTooltip);
                        selectedTooltip.tooltip.options.content = inputValue;
                        selectedTooltip.tooltip.refresh();*/
                        //$("#classesAvailableGrid").data('tooltiptext').refresh();
                    }
                    else {
                        var i = '<i id="com-' + el.data('rid') + '" class="fa fa-comment comment" data-tooltiptext="' + inputValue + '" aria-hidden="true"></i>';

                        el.find('div').append(i);
                    }
                }
                else {
                    el.find('div').empty();
                }

                swal({
                    title: data.title,
                    text: data.success,
                    type: "success",
                    timer: 1000,
                });
            }
            else {
                swal(data.title, data.error, "error");
            }
        }).error(function (data) {
        });

I have tried several things but none have worked. Any help would be appreciated!

Thank you,

Jokull

[Dimitar]

Hello Jokull,

I am attaching an ASP.NET MVC project, where a similar scenario to the one described is demonstrated (Updating Grid tooltip content from a Kendo UI Window).

To achieve the desired result I have used the following approach:

1) Used a client template for the Grid column to which the Tooltip is bound. This allows us to wrapp the content in a custom container and also add a title attribute, which will be used to update the tooltip:

columns.Bound(p => p.ShipName).ClientTemplate("<div class='ship-temp' title='#= data.ShipName #'>#= data.ShipName #</div>");

2) Attached a doubleclick event handler to the grid column ("ShipName" in this case). When triggered, the current column container is saved in a global variable:

<script>  

var target = "";

 

$("#grid").on("dblclick", ".ship-temp", function (e) { 

target = e.target;

var window = $("#myWindow").getKendoWindow();

window.center().open();
  });

</script>

3) After the Window button is clicked, the saved target title attribute is modified with the new value and the refresh() method of the Tooltip is called:

function OnTooltipChangeClick(e) {
var window = $("#myWindow").getKendoWindow();
var newText = window.wrapper.find(".k-textbox").val();

$(target).attr("title", newText);
$("#grid").getKendoTooltip().refresh();
window.close();
}

You will notice that with this approach the content is being updated only for the respective row.

Regards,
Dimitar
Progress Telerik