Grid Detail Template How to add tooltip and column header

[Jerry]

We are using the kendo grid and detail template.

Is there a way to do the following with the expand/collapse column?

1: Add a tooltip to the expand/collapse icon?

2: Add column header to the expand/collapse column?

 

[Nikolay]

Hi Jerry,

You can utilize the Kendo UI Tooltip to add a tooltip to the expand and collapse icons. This can happen in the dataBound event handler of the Grid.

dataBound: function(e) {
              var tooltip = $(".k-hierarchy-cell").kendoTooltip({
                filter: "a",
                width: 120,
                position: "top",
                content: "Tooltip content!"
              }).data("kendoTooltip");
            },

Regarding the title of the expand/collapse column header, you can add it programmatically with jQuery.

dataBound: function(e) {
              $("th.k-hierarchy-cell").text("Title");
              $("th.k-hierarchy-cell").css('vertical-align', 'middle');
            },

Here is a Dojo demo I prepared demonstrating both approaches: https://dojo.telerik.com/aQiBiLOD

Let me know if you have any questions.

Regards,
Nikolay
Progress Telerik