CODEWITHSUNDEEP
jqueryasp.net-mvc-4kendo-uikendo-gridkendo-tooltip
venki
venki

Reputation: 303

Display Kendo Tooltip only on F2 keypress event

I have a kendo grid with datas. I make the kendo grid selectable by row. Before I used kendo tooltip to display the details of the selected row in tooltip. Now my client requirement is when selecting the row it cannot show the kendo tooltip on mouseenter or click. After we press F2 key the kendo tooltip has to show.

$("#grid").kendoTooltip({
    filter: ".k-state-selected",
    height: "150px",
    width: "Auto",
    autoHide: false,
    content: function (e) {
        debugger
        var target = e.target;
        var Column = $(target).text();
        var ICDCode = target[0].cells[0].innerText;
        var ICDCodeDescription = target[0].cells[1].innerText;
        var ICDGroupCode = target[0].cells[2].innerText;
        var ICDGroupDescription = $(".k-state-selected td.hasTooltip", "#grid")[0].id;
        $("#lblICDCode").html(ICDCode)
        $("#lblICDCodeDescription").html(ICDCodeDescription)
        $("#lblICDGroupCode").html(ICDGroupCode)
        $("#lblICDGroupDescription").html(ICDGroupDescription)
        var toolTip = $("#divRow").html();
        return toolTip;
    }
})

I achieved showing the kendo tooltip with selected row datas on mouseenter event. In kendo tootip configuration is available to set to show tooltip on "mouseenter", "click" and "focus". Is there any options to display the tooltip after pressing F2 key? I need some solutions for these.

Upvotes: 2

Views: 677

Answers (1)

Jarosław Kończak
Jarosław Kończak

Reputation: 3407

Change kendo showOn property on 'focus' then use this code to show tootlip after F2 is pressed:

$("body").keydown(function (e) {
    if(e.key === "F2"){
        var $grid = $("#grid");
        $grid.data('kendoTooltip').show($grid.find('.k-state-selected'));
    }
});

Example: http://dojo.telerik.com/atUrI

Upvotes: 1

Related Questions