Adding Hovertext on Kendoui Grid Column Headers

Adding Hovertext on KendoUI Grid Column Headers

If the contents of the tooltip is static, then you could use the columns.headerTemplate to then add a tooltip to the header.

Example jsFiddle.

The code:

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: {
                        type: "number"
                    },
                    Freight: {
                        type: "number"
                    },
                    ShipName: {
                        type: "string"
                    },
                    OrderDate: {
                        type: "date"
                    },
                    ShipCity: {
                        type: "string"
                    }
                }
            }
        },
        pageSize: 20,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    },
    height: 430,
    filterable: true,
    sortable: true,
    pageable: true,
    columns: [{
        field: "OrderID",
        filterable: false
    },
        "Freight", {
        field: "OrderDate",
        title: "Order Date",
        width: 120,
        format: "{0:MM/dd/yyyy}",
        headerTemplate: '<span title="This is the date the order was made.">Order Date</span>'
    }, {
        field: "ShipName",
        title: "Ship Name",
        width: 260,
        headerTemplate: '<span title="The company the order was shipped to.">Ship Name</span>'
    }, {
        field: "ShipCity",
        title: "Ship City",
        width: 150,
        headerTemplate: '<span title="The city the order was shipped to.">Ship City</span>'
    }]
});

$("#grid").kendoTooltip({
    filter: ".k-header span"
});

How to get tooltip to display only on column header name on a Kendo Grid?

myGrid.kendoTooltip({
        filter: "th[data-title]",
        content: function (e) {
            if (e.target) {
                var target = e.target;
                return $(target).text();
            }
        }
    });

Modified the filter to "th" in order to show tooltip on column headers. Further modified with [data-title] to only show tooltip where there is a title. Thus, disabling tooltip or mouseover on columns with no title. Online resources say to add [title] but that alone does not work. Hopefully this helps someone.

Dynamically add tooltips to kendo grid rows of a column

Posting the answer as it might help anyone.

I got that working after doing this...

columns.Bound(p => p.partialNotes).Title("Description").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:left" }).Width("8%").HtmlAttributes(new { title =  "#= completeNotes #" });

I have just added HtmlAttributes(new { title = "#= completeNotes #" })

So now when I place the mouse over the Description column data , I get the complete Notes as a tool tip.

Tooltip for grid column name in Kendo UI Angular 2

You can insert a span with a title in the template:

<template kendoHeaderTemplate let-column let-columnIndex="columnIndex">
  <span title={{column.field}}>{{column.field}}({{columnIndex}})</span>
</template>

http://plnkr.co/edit/eYtBLMv45XFLcnbXn2ZW?p=preview

Add Column Sort Index To Column Headers For Multi Column Sort

When using Headertemplates, there is an issue with not being able to capture the event for "just before column headers are rendered." I have the following dataBinding event that still does what you want :

 dataBinding: function(e){

    var sortArray = $("#grid").data("kendoGrid").dataSource.sort();                
    if(sortArray)
    {
    for(var i = 0;i < sortArray.length; i++)
    {

     $("#grid th[data-field=" + sortArray[i].field + "] .k-link").html("(" + (i+1) + ")" + sortArray[i].field ); 
    }

      var sortedColumns = sortArray.map(function(o){return o.field});

      var columns = $("#grid").data("kendoGrid").columns; 
     for (i in columns)
     {
        if(sortedColumns.indexOf(columns[i].field) == -1)
         $("#grid th[data-field=" + columns[i].field + "] .k-link").html(columns[i].field ); 
     }

    }

  }

The following is the Kendo dojo link : http://dojo.telerik.com/eneH/4

Kendo UI for Angular: Tooltip on a grid cell with external content

OK, I solved it. The solution was to modify the kendo column with ng-template:

<kendo-grid-column title="My titel" width="90">
    <ng-template kendoGridCellTemplate let-dataItem>
                  <span kendoTooltip title="{{dataItem?.tooltipContent}}">
                    {{dataItem?.cellContent}}
                  </span>
    </ng-template>
</kendo-grid-column>

Adding a column which contains a hyperlink for every row in KendoUI grid control in ASP.NET MVC

columns.Template(@<text></text>)
       .ClientTemplate("<a href='" + Url.Action("Index", "Home") + "'>Create Facility</a>")
       .HtmlAttributes(new { style = "text-align: left;" })
       .Width(60);

This worked for me

how to display kendo tooltip for kendo grid column menu

The problem is not your code but when you run it. If you do it just after initializing the grid, the grid menu still does not exist and then you are not defining the Tooltip. Run that code in the Grid dataBound event.

Example:

$("#grid").kendoGrid({
    dataSource: {
        data    : createRandomData(300),
        pageSize: 10,
        schema  : {
            model: {
                fields: {
                    Id       : { type: 'number' },
                    FirstName: { type: 'string' },
                    LastName : { type: 'string' }
                }
            }
        }
    },
    columnMenu: true,
    columns   : [
        { field: "FirstName", width: 90, title: "First Name" },
        { field: "LastName", width: 90, title: "Last Name" }
    ],
    dataBound: function () {
        $(".k-header-column-menu").kendoTooltip({
            content: "column menu"
        });
    }
});

---

Related Topics