Adding Hovertext on KendoUI Grid Column Headers

Question

I\'m trying to add custom hovertext (like a tooltip), to the column headers in a KendoUI grid. The text should be specific to each column and ideally not displayed on anything b

Answer 1

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: 'Order Date'
    }, {
        field: "ShipName",
        title: "Ship Name",
        width: 260,
        headerTemplate: 'Ship Name'
    }, {
        field: "ShipCity",
        title: "Ship City",
        width: 150,
        headerTemplate: 'Ship City'
    }]
});

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