Adding Hovertext on KendoUI Grid Column Headers

前端未结

关注

 3  2098

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

相关标签:

3条回答

隐瞒了意图╮

2021-02-13 21:58

If you want to define tooltip on every columnn header, you can define kendoTooltip on grid thead element like this:

grid.thead.kendoTooltip({
    filter: "th",
    content: function (e) {
        var target = e.target;
        return $(target).text();
    }
});

This shows hover text when you hover the header anywhere, not only on text in the header. The tooltip is shown even when the column has minimal width and the text of the header is not presented/shown in its full length or isn't shown at all. See example.

Here's the complete code from the example at jsbin.com, in case it needs to be reproduced in the future:

HTML:*

<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
 <div id="grid"></div>  
</body>
</html>

JavaScript:

var grid = $("#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
    },
    height: 430,

    columns: [{
            field: "OrderID",
            width: 250
        }, {
            field: "ShipName",
            title: "Ship Name",
            width: 200

        }
    ]
}).data("kendoGrid");

grid.thead.kendoTooltip({
    filter: "th",
    content: function (e) {
        var target = e.target; // element for which the tooltip is shown
        return $(target).text();
    }
});

0 讨论(0)

梦如初夏

2021-02-13 22:05
For anyone attempting to do this with Kendo UI MVC it can be achieved by using the following logic:

On the grids DataBound event create a JavaScript function to handle the databound.

Within that JavaScript function add the following code (for my example I've named my function createToolTip()
```
function createToolTip() {

    $("tr > th").kendoTooltip({
        position: "top"
    });
}
```
This will create a tool tip to display on the grids header with the position of the tool tip above the header.
0 讨论(0)
发布评论:

提交评论
- 加载中...

你的背包

2021-02-13 22:10

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"
});

0 讨论(0)