CODEWITHSUNDEEP
tooltipkendo-uikendo-gridkendo-asp.net-mvc
flower
flower

Reputation: 2242

How to use custom content to show the grid's tooltip?

How to use custom content to show the grid's tooltip? I want to show the tooltio ofcoloumn 2 and coloumn 3 ,and the content is a span which id called spanid or div which is called divid?

var tooltip = $("#Grid").kendoTooltip({
        filter: "td",
        width: 120,
        position: "top",
        content: value
    }).data("kendoTooltip");

I try to write this,but it seems wrong.

var tooltip = $("#Grid").kendoTooltip({
        filter: "td[3n]||td[2n]",
        width: 120,
        position: "top",
        content: divid.html
    }).data("kendoTooltip");

Upvotes: 0

Views: 7366

Answers (2)

Raza
Raza

Reputation: 847

 //show the tooltip
            tooltip = $("#grdData").kendoTooltip({
                filter: 'td:not(:first-child, :nth-child(2), :empty)',
})

this will allow you to select first column , second column and it will also filter out empty cells. You can use the nth child selector. As this is a CSS3 selector, it will work from IE9+, chrome and firefox won't be an issue.

Hope this helps !

Upvotes: 0

HaBo
HaBo

Reputation: 14287

This is a working code for my scenario, it will work tool tip for all product names with class pLink

$(".pLink")
    .kendoTooltip(
    {
        content: kendo.template($("#toolTipTemplate").html()),
        position: "top",
        width: "auto",
        height: "auto",
        animation: {
            close: { effects: "fadeOut zoom:out", duration: 300 },
            open: { effects: "fadeIn zoom:in", duration: 300 }
        }
    });

<script id="toolTipTemplate" type="text/x-kendo-template">
                <p class="tooltipProductName">#=target.data('title')#</p>
</script>

Upvotes: 1

Related Questions