Loading

How To Add Tooltip In Kendo Grid (MVC) And Apply Styling ?

Aryan Kumar

How To Add Header And Cell Tooltip In Kendo Grid (MVC) And Apply Styling.

We need tooltip in hidden header column only, sometimes due to less grid width, some fields header and data not show in full. We need to apply tooltip only for those header and cell.

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted answer
place the below code on your view page where Kendo Grid is present.
$(document).ready(function() {
var grid = $('#grid').data('kendoGrid');
         grid.thead.kendoTooltip({
            filter: "th",
            content: function (e) {
                var target = $(e.target)
                 return target[0].dataset.title;
            }
          })
});

for more, visit my articles on kendo UI
https://www.sharpencode.com/article/KendoUI/add-and-edit-kendo-grid-with-popup-window
+1
Aryan Kumar5y ago
Hi Sachin,

Thanks for your quick solution, with little modification...it worked exactly the way i wanted...i mean in my case requirement was to show tooltip only for specific columns...

So i made minor changes :

instead of "filter: "th"," i applied "filter:th:nth-child(3)"

Thank you...
0