Agregue dinámicamente información sobre herramientas a las filas de la cuadrícula de kendo de una columna

Question

Tengo una columna con algunas notas que se muestran en las filas. Como las notas son enormes, he cortado las notas en el controlador y las he enviado a mi página aspx. Lo que quiero lograr es, quiero mostrar las notas completas en forma de punta de herramienta sobre el mouse sobre la fila de la grilla (o si es posible exactamente sobre la celda). ¿Hay alguna forma de lograr esto? Cualquier ayuda sería muy apreciada. Gracias por adelantado.

Answer 1

Publicando la respuesta, ya que podría ayudar a cualquier persona.

Tengo que trabajar después de hacer esto ...

columns.Bound(p => p.partialNotes).Title("Description").HeaderHtmlAttributes(new { style = "text-align:center" }).HtmlAttributes(new { style = "text-align:left" }).Width("8%").HtmlAttributes(new { title = "#= completeNotes #" }); 

acabo añadido htmlAttributes (nueva {title = "# = # completeNotes"})

Así que ahora cuando coloco Al pasar el mouse sobre los datos de la columna Descripción, obtengo las Notas completas como una información sobre herramientas.

Answer 2

Usar un widget de terceros también es una posibilidad. He añadido qtip consejos para encabezados de columna como ésta

KendoUI columna de cuadrícula elemento de la matriz

{ 
    field:"property", 
    headerTemplate:kendo.template($("#h_Entity_property").html()) 
}, 

La plantilla de encabezado

<link rel="stylesheet" type="text/css" href="lib/Craga89-qTip2-bfcc9ef/dist/jquery.qtip.min.css"/> 
<link rel="stylesheet" type="text/css" href="lib/Craga89-qTip2-bfcc9ef/util/qtip.util.css"/> 
<script type="text/javascript" src="lib/Craga89-qTip2-bfcc9ef/dist/jquery.qtip.min.js"></script> 
<script type="text/javascript" src="lib/Craga89-qTip2-bfcc9ef/util/Dialogues.js"></script> 
<script type="text/javascript" src="lib/Craga89-qTip2-bfcc9ef/util/Qtip2Util.js"></script> 

<script type="text/x-kendo-template" id="h_Entity_property"> 
    Property 
    <img onclick="Qtip.local(this, 'i_Entity_property')" src="img/info.gif"/> 
    <div id="i_Entity_property" style="display:none;"> 
     Elaborate a bit... 
    </div> 
</script> 

generador Tooltip

var Qtip = { 
    local:function (element, contentId) { 
     $(element).qtip($.extend({}, qTipSharedOptions, { 
       content:{ 
        text:$('#' + contentId).html(), 
        title:{ 
         text:' ', 
         button:true 
        } 
       } 
      } 
     )); 
    }, 
    ... 
}; 

var qTipSharedOptions = { 
    position:{ 
     at:'top right', // Position the tooltip above the link 
     my:'bottom left', 
     viewport:$(window), // Keep the tooltip on-screen at all times 
     effect:false // Disable positioning animation 
    }, 
    style:{ 
     classes:'ui-tooltip-tipsy ui-tooltip-shadow' 
    }, 
    show:{ 
     ready:true, 
     event:false, 
     solo:true // Only show one tooltip at a time 
    }, 
    hide:false 
};