Css 在KendoUI网格列标题上添加悬停文本
我正在尝试向KendoUI网格中的列标题添加自定义悬停文本(如工具提示)。文本应特定于每一列,理想情况下,除了标题行外,不显示任何内容。网格对象没有工具提示选项,但我不确定是否有办法使用CSS或其配置来实现 我很想知道是否有人曾经这样做过,如果有,是如何做的,或者如果不可能的话Css 在KendoUI网格列标题上添加悬停文本,css,kendo-ui,Css,Kendo Ui,我正在尝试向KendoUI网格中的列标题添加自定义悬停文本(如工具提示)。文本应特定于每一列,理想情况下,除了标题行外,不显示任何内容。网格对象没有工具提示选项,但我不确定是否有办法使用CSS或其配置来实现 我很想知道是否有人曾经这样做过,如果有,是如何做的,或者如果不可能的话 谢谢。如果工具提示的内容是静态的,则可以使用添加到标题中 守则: $("#grid").kendoGrid({ dataSource: { type: "odata", tran
谢谢。如果工具提示的内容是静态的,则可以使用添加到标题中 守则:
$("#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"
});
$(“#网格”).kendoGrid({
数据源:{
类型:“odata”,
运输:{
阅读:“http://demos.kendoui.com/service/Northwind.svc/Orders"
},
模式:{
型号:{
字段:{
医嘱ID:{
类型:“编号”
},
运费:{
类型:“编号”
},
船名:{
类型:“字符串”
},
订购日期:{
类型:“日期”
},
船舶城市:{
类型:“字符串”
}
}
}
},
页面大小:20,
对,,
是的,
服务器排序:true
},
身高:430,
可过滤:正确,
可排序:是的,
pageable:对,
栏目:[{
字段:“订单ID”,
可过滤:false
},
“运费”{
字段:“订单日期”,
标题:“订单日期”,
宽度:120,
格式:“{0:MM/dd/yyyy}”,
headerTemplate:“订单日期”
}, {
字段:“ShipName”,
标题:“船名”,
宽度:260,
headerTemplate:“船名”
}, {
字段:“ShipCity”,
标题:“船舶城”,
宽度:150,
校长职位:“船舶城”
}]
});
$(“#网格”).kendoTooltip({
过滤器:“.k-收割台跨度”
});
如果要在每个ColumnHeader上定义工具提示,可以在网格上定义AD元素,如下所示:
grid.thead.kendoTooltip({
filter: "th",
content: function (e) {
var target = e.target;
return $(target).text();
}
});
当您将标题悬停在任意位置(而不仅仅是标题中的文本)时,将显示悬停文本。即使列具有最小宽度,并且标题文本未显示/显示完整长度或根本未显示,也会显示工具提示。看见
以下是jsbin.com上示例的完整代码,以防将来需要复制: 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>
对于任何试图使用剑道UI MVC实现这一点的人,可以使用以下逻辑实现: 在网格
DataBound
事件上创建JavaScript
函数来处理数据绑定
在该JavaScript
函数中添加以下代码(例如,我将我的函数命名为createToolTip()
这将创建一个工具提示,显示在网格标题上,工具提示的位置在标题上方。链接可以作为补充信息提供帮助,但是。请包括与问题相关的链接信息摘要,并解释如何解决问题。更好的做法是,但您应该始终提供完整的code需要从像jsbin和JSFIDLE这样的站点复制示例,以防链接崩溃。一定要像您一样在自己的单独块中发布重要的部分;然后在底部添加其余代码以供参考。我为您添加了它。和+1,因为您已经证明了这是可行的。一点增强:过滤器:“.k-header.k-link span”更准确地定位标题单元格。答案中的选项有时会使过滤器弹出窗口不显示,因为工具提示介于两者之间。
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();
}
});
function createToolTip() {
$("tr > th").kendoTooltip({
position: "top"
});
}