jquery - template - Interfaz de usuario de Kendo: impidiendo condicionalmente que se muestre una información sobre herramientas en una celda de cuadrÃcula
kendo window jquery (5)
Estoy trabajando para intentar mostrar una información sobre herramientas de Kendo en una celda de la grilla, obteniendo el contenido de una llamada ajax. Mi declaración de información sobre herramientas tiene el siguiente aspecto:
var grid = $("#myGrid").data("kendoGrid");
grid.table.kendoTooltip({
width: 300,
height: 200,
opacity: 0,
callout: true,
position: ''right'',
animation:
{
close: {
effects: "fade:out"
},
open: {
effects: "fade:in",
duration: 1000
}
},
contentTemplateId: "tooltipTemplate",
filter: "td",
show: function (e) {
},
content: function (e) {
var target = e.target;
currentTarget = target;
var message = "Loading...";
if ($(currentTarget[0]).attr("name") !== undefined) {
//Do ajax call, show tool tip
}
else {
//CLOSE THE TOOTLIP
return false;
}
}
});
En esa parte inferior "else", quiero cerrar u ocultar la información sobre herramientas ya que no tengo el atributo "nombre", que se pasa a mi llamada ajax para mostrar el contenido. He intentado todo lo siguiente:
$("#myGrid").data("kendoGrid").table.kendoTooltip.hide();
$("#myGrid").data("kendoTooltip").hide();
e.sender.popup.destroy();
e.sender.popup.hide();
e.sender.popup.close();
¡Ninguno de estos funciona! Destroy es lo más cercano, pero no puedo recrear la información sobre herramientas cuando la necesito de nuevo. ¿Algún consejo?
La información sobre herramientas se implementa de una manera que hace esto difícil. Podría llamar this.hide() envuelto en un setTimeout , pero tendrá un efecto de parpadeo. Por lo tanto, probablemente deba implementar su propia solución para esto. Aquí hay una idea para comenzar:
Cree un pseudo-evento beforeShow que se desencadena antes de que se muestre la información sobre herramientas (todo esto podría hacerse de una manera más sofisticada):
// customize the _show method to call options.beforeShow
// to allow preventing the tooltip from being shown..
kendo.ui.Tooltip.fn._show = function (show) {
return function (target) {
var e = {
sender: this,
target: target,
preventDefault: function () {
this.isDefaultPrevented = true;
}
};
if (typeof this.options.beforeShow === "function") {
this.options.beforeShow.call(this, e);
}
if (!e.isDefaultPrevented) {
// only show the tooltip if preventDefault() wasn''t called..
show.call(this, target);
}
};
}(kendo.ui.Tooltip.fn._show);
Úselo así para evitar condicionalmente mostrar la información sobre herramientas:
var toolTip = $(''#grid'').kendoTooltip({
filter: ".tooltip",
beforeShow: function (e) {
if ($(e.target).data("name") === null) {
// don''t show the tooltip if the name attribute contains null
e.preventDefault();
}
},
content: function (e) {
var row = $(e.target).closest("tr");
var dataItem = grid.dataItem(row);
return "<div>Hi, this is a tool tip for id " + dataItem.Id + "! </div>";
}
}).data("kendoTooltip");
( demo )
Acabo de enterarme de esto y encontré una solución que funciona muy bien. El evento de content puede funcionar como un evento beforeShow , porque en realidad se llama antes de que se beforeShow evento show. Si lo tratamos como un evento beforeShow , podemos hacer esto
var grid = $("#myGrid").data("kendoGrid");
grid.table.kendoTooltip({
width: 300,
height: 200,
opacity: 0,
callout: true,
position: ''right'',
animation:
{
close: {
effects: "fade:out"
},
open: {
effects: "fade:in",
duration: 1000
}
},
contentTemplateId: "tooltipTemplate",
filter: "td",
show: function (e) {
},
content: function (e) {
var target = e.target,
currentTarget = target;
// hide popup as default action
e.sender.popup.element.css("visibility", "hidden");
if ($(currentTarget[0]).attr("name") !== undefined) {
e.sender.popup.element.css("visibility", "visible");
//Do ajax call, show tool tip
$.getJSON("SomeUrl").then(function(response) {
$(target).text(response);
});
return "Loading...";
}
return "";
}
});
Si arroja un error en el método de contenido, esto evitará que la información sobre herramientas aparezca.
var grid = $(''#myGrid'').data(''kendoGrid'');
grid.table.kendoTooltip({
width: 300,
height: 200,
opacity: 0,
callout: true,
position: ''right'',
animation: {
close: {
effects: ''fade:out''
},
open: {
effects: ''fade:in'',
duration: 1000
}
},
contentTemplateId: ''tooltipTemplate'',
filter: ''td'',
show: function (e) { },
content: function (e) {
var message = ''Loading...'';
if (!$(e.target).attr(''name'')) {
throw ''No name yet, don/'t show tooltip!'';
}
//Do ajax call, show tool tip
}
});
Sin embargo, si está esperando una respuesta ajax, solo cree la información sobre herramientas cuando se complete la llamada.
considera algo así como
jQuery(''#searchCoursesMainGrid'').kendoTooltip({
//The ">" which is the expand arrow is in its own table column. So add one more column
//":not(:empty) is a css3 selector that checks if there is a value inside the td element"
filter: ''td:nth-child(6):not(:empty)'', //this filter selects the webNote column cells that are not empty
position: ''right'',
autoHide: false,
width: 500,
content: function (e) {
//.data(''kendoGrid'') is a reserved word by Kendo
//http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields
var dataItem = jQuery(''#searchCoursesMainGrid'').data(''kendoGrid'').dataItem(e.target.closest(''tr''));
var content = dataItem.webNote;
return content;
}
}).data(''kendoTooltip'');
La mayoría de estas respuestas no son muy buenas en la versión más reciente de Kendo. Lo han hecho más fácil.
Primero, configuraría su filtro para verificar un atributo:
ak-tooltip="k-filter: td[tooltip]; k-content.call: getTooltipDataTemplate($event);
k-width:auto; k-position: top;
Luego, en la plantilla de su grilla, declararía el atributo para las columnas en las que desea que se muestre la información sobre herramientas:
{
title: ''Column A'',
field: ''ColumnA'',
sortable: {
initialDirection: "asc"
},
hidden: true
},
{
title: ''ShowToolTip'',
field: ''ShowToolTip'',
width: 500,
attributes: {
tooltip: true
}
},
{
title: ''NoToolTip'',
field: ''NoToolTip''
},