Grid header Tooltips

[Arman]

Can you post an example of attaching the new tooltip to grid column headers? tx!

[Iliana Dyankova]

Hi Arman,

Please check this jsBin example which I prepared for you - it demonstrates a possible implementation of the desired functionality.

Regards,
Iliana Nikolova
the Telerik team

[Ephrem]

I want add custom toolTip text to kendo Grid coulmn header. right now I
can only have a toolTip text which is the title of the column as explained
above.

Can you please help me achieve that?

[Iliana Dyankova]

Hi Ephrem,

In order to achieve this you should specify the text via the tooltip widget's content configuration option. For example: 

grid.thead.kendoTooltip({
   //....
   filter: "th",
   content: "Custom Text"
});

Kind regards,

Iliana Nikolova
the Telerik team

[Ephrem]

Hi Iliana,

Thanks you for your reply. the exact thing I want to achieve was to have a different and custom text for every column in a grid. So if I have  Id and Name columns in a grid I wanted to have custom tooltip text for both.

Thanks,
Ephrem

[Iliana Dyankova]

Hello Ephrem,

In order to achieve this you should implement your custom logic in the content function. For example:

grid.thead.kendoTooltip({
    filter: "th",
    content: function (e) {
       var target = e.target;
       if($(target).index() == 1) {
           return ("SomeTooltipText")
       }
       else {return ("AnotherTooltipText")}
    }
})

Regards,
Iliana Nikolova
the Telerik team

[DHHS]

Hi Iliana,

 

I am trying to use kendo tool tip on my grid headers. It is working fine, but I am getting white space on the background of the header when i mouse over on the header. I am sure i might be missing something. Can you please tell me if I am missing anything.

 

All I am doing is this . I have attached a screen shot of my grid when mouse over on the header.

    $(document).ready(function () {
        var grid = $("#contractGrid").data("kendoGrid");
        grid.thead.kendoTooltip({
            filter: "th",
            content: function (e) {
                var target = e.target; // the element for which the tooltip is shown
                return target.text(); // set the element text as content of the tooltip
            }
        });
});

 

​

 

[Plamen Lazarov]

Hi DHHS,

Based on the provided screenshot, I assume that the Bootstrap theme is applied to the Grid. If so, please use the following CSS rule to override the white background: 

.k-grid-header .k-state-active {
  background: #f5f5f5;
}

 

Regards,
Plamen Lazarov
Telerik

 

 

[DHHS]

Perfect. Thank you. 

  I have custom commands in my last column, so the text is null but still the tooltip is showing. Is there a way that i can hide the tooltip if the text is null . I have tried something like this  but didn't work :(

var grid = $("#contractGrid").data("kendoGrid");
  var tooltip = grid.thead.kendoTooltip({
       filter: "th",
       content: function (e) {
           var target = e.target; // element for which the tooltip is shown
           alert($(target).text());
           if ($(target).text() == null) {
               tooltip.hide();
           }
           return $(target).text();

       },
       width :120
   });

 

 

and one more thing. I have custom command buttons with very big names, so ​I want to give something small text on the button text and when I mouse over i want to see the full text on it. Below are my custom command buttons. 

columns.Command(command =>

             {

                 command.Custom("Budget").SendDataKeys(true).Click("budgetClick").Text("B").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-add k-primary" });

                 command.Custom("RevenueSource").SendDataKeys(true).Click("revenueSourceClick").Text("RS").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-edit k-primary" });

                 command.Custom("ServiceDetails").Text("BC").SendDataKeys(true).Click("ServiceChilClick").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-delete k-primary" });

                 command.Custom("Procedure").Text("PC").SendDataKeys(true).Click("ProcedureClick").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-view k-primary" });

             })

[Plamen Lazarov]

Hello DHHS,

In order to show the Tooltip based on a condition I suggest you checking the following how-to article: 

http://docs.telerik.com/kendo-ui/web/tooltip/how-to/show-on-length-condition#show-only-if-text-exceeds-certain-length.

Concerning your second question, changing the text of a custom command button on the fly is not supported out-of-the-box and requires custom implementation. A possible approach would be setting a title of the button which will be displayed on mouse over.

I hope this helps. 

Regards,
Plamen Lazarov
Telerik

 

 

[DHHS]

Sure the title of the button works too. But custom command doesnt have title option :(

 

How to filter in kendo tool tip for custom command? Like for grid header we are filtering for th, what should i filter for custom command

 

 

Thanks,

Veena

[DHHS]

Sure the title of the button works too. But custom command doesnt have title option 

 

How to filter in kendo tool tip for custom command? Like for grid header we are filtering for th, what should i filter for custom command

 

 

Thanks,

Veena

[Plamen Lazarov]

Hello DHHS,

You can add the title attribute in the same way as you have added the CSS classes. For instance: 

command.Custom("Budget").Text("B").HtmlAttributes(new { @class = "k-button k-button-icontext k-grid-add k-primary", title="Long text here" });

 

Regards,
Plamen Lazarov
Telerik

 

 

[DHHS]

Thank you.

 

what is the filter i have to add for custom command button for kendo tool tip

var grid = $("#contractGrid").data("kendoGrid");
  var tooltip = grid.thead.kendoTooltip({
       filter: "th", // here what should i give for custom command button
       content: function (e) {
           var target = e.target;
           alert($(target).text());
           if ($(target).text() == null) {
               tooltip.hide();
           }
           return $(target).text();

       },
       width :120
   });​

[Plamen Lazarov]

Hello DHHS,

In order to show tooltips over custom command buttons, you should initialize the Tooltip widget from an HTML element, which is an ancestor of the data table. thead is an ancestor of the Grid header area, while tbody is an ancestor of the data area.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields-tbody

Also, change the Tooltip filter to ".k-button". However, this will affect all buttons inside the Grid's data rows. If this is not desired, please add a custom class via HtmlAttributes, and use it as a Tooltip filter. 

$(function () {
  var grid = $("#grid").data("kendoGrid");
  var tooltip = grid.tbody.kendoTooltip({
    filter: ".k-button",
    content: function (e) {
       var target = e.target; // element for which the tooltip is shown
       if ($(target).text() == null) {
         tooltip.hide();
       }
       return $(target).text();

    },
    width: 120
  });
});

 

Regards,
Plamen Lazarov
Telerik

 

 

[DHHS]

Thank You :)

[Tony]

Hey Plamen! I appreciate all your help in the forum, I was wondering if you could provide an example in asp.net core for the tooltip to grab the title of the column. Thank you

[Petar]

Hi Tony,

Attached to my reply, you will find a runnable example demonstrating how we can add a ToolTip to the Grid component in the context of the UI for ASP.NET Core. 

To implement the targeted functionality of displaying a given column's name in the ToopTip, the following code is used.

<script id="template" type="text/x-kendo-template">
    <div class="template-wrapper">
        <p>#=$($(".k-grid-header > tr > th")[target.context.cellIndex]).text()#</p>
    </div>
</script>

I hope the example and the above description will help you implement the targeted functionality in the application you are working on.

Regards,
Petar
Progress Telerik