#jquery #kendo-grid
Вопрос:
ссылка на рабочий код приведена ниже
пожалуйста, нажмите здесь, чтобы увидеть код
Я попытался использовать поле заголовка, но при наведении мыши оно не отображается.
<!DOCTYPE html>
<html>
<head>
<title>Kendo UI Grid Icon Buttons</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css" />
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.default.min.css" />
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
<style>
.k-grid .k-grid-toolbar .k-grid-add,
.k-grid tbody .k-grid-edit,
.k-grid tbody .k-grid-update,
.k-grid tbody .k-grid-cancel,
.k-grid tbody .k-grid-delete {
min-width: 0;
}
.k-grid .k-grid-toolbar .k-grid-add .k-icon,
.k-grid tbody .k-grid-edit .k-icon,
.k-grid tbody .k-grid-update .k-icon,
.k-grid tbody .k-grid-cancel .k-icon,
.k-grid tbody .k-grid-delete .k-icon {
margin: 0;
}
</style>
</head>
<body>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" amp;amp; options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 10,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 500,
toolbar: [{name: "create", text: " "}],
columns: [
{ field: "ProductName" },
{ command: [
{name: "edit", text: { edit: " ", update: " ", cancel: " " }},
{ name: "destroy", text: " "}
], title: "Action", width: "250px" }
],
editable: "inline"
});
});
</script>
</div>
</body>
</html>
добавил поле всплывающей подсказки и попробовал, но я не получил всплывающую подсказку при наведении мыши.
Мне нужно, чтобы всплывающая подсказка отображалась на мыши каждого значка, во
всплывающей подсказке столбца действий :- «Редактировать», «Обновить», «Отменить», «Удалить»
Ответ №1:
Один из способов сделать это-создать подсказку кендо для каждой кнопки и указать свойством filter класс кнопки.
Задает селектор для элементов в контейнере, который будет отображать всплывающую подсказку.
Например, чтобы отобразить всплывающую подсказку на каждой кнопке редактирования, вы можете сделать это:
$("#grid").kendoTooltip({
filter: ".k-grid-edit",
content: function (e) {
return "edit";
}
});
Вот додзе с полным примером ниже:
<div id="grid"></div>
<script>
function hideKendoToolTips() {
$(".k-tooltip").hide();
}
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl "/Products",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl "/Products/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl "/Products/Destroy",
dataType: "jsonp"
},
create: {
url: crudServiceBaseUrl "/Products/Create",
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" amp;amp; options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
batch: true,
pageSize: 10,
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
ProductName: { validation: { required: true } }
}
}
}
});
$("#grid").kendoGrid({
dataSource: dataSource,
pageable: true,
height: 500,
toolbar: [{name: "create", text: " "}],
columns: [
{ field: "ProductName" },
{ command: [
{name: "edit", text: { edit: " ", update: " ", cancel: " " }},
{ name: "destroy", text: " "}
], title: "amp;nbsp;", width: "250px" }
],
editable: "inline",
beforeEdit: hideKendoToolTips,
cancel: hideKendoToolTips,
save: hideKendoToolTips
});
$("#grid").kendoTooltip({
filter: ".k-grid-edit",
content: function(e){
return "edit";
}
});
$("#grid").kendoTooltip({
filter: ".k-grid-delete",
content: function(e){
return "delete";
}
});
$("#grid").kendoTooltip({
filter: ".k-grid-update",
content: function(e) {
return "update";
}
});
$("#grid").kendoTooltip({
filter: ".k-grid-cancel",
content: function(e){
return "cancel";
}
});
});
</script>
Вы заметите , что я добавил функцию hideKendoToolTips , и она вызывается во время сетки beforeEdit cancel и save событий. Без этой функции всплывающая подсказка не будет автоматически скрываться после нажатия кнопок редактирования, обновления или отмены. Я думаю, что это связано с кнопкой, которой назначена подсказка, которая удаляется при нажатии на нее. В любом случае, эта функция предназначена только для того, чтобы скрыть всплывающую подсказку после нажатия кнопки.
Ответ №2:
Используйте событие привязки данных сетки для добавления заголовков к кнопкам, например:
$("#grid").kendoGrid({
dataSource: dataSource,
dataBound: function () {
$(".k-grid-edit").attr("title", "Edit this record");
},
...