Aggiunge dinamicamente le descrizioni comandi alle righe della griglia di kendo di una colonna

Question

Ho una colonna con alcune note che vengono visualizzate nelle righe. Dato che le note sono enormi, ho tagliato le note nel controller stesso e l'ho inviato alla mia pagina di aspx. Quello che voglio ottenere è che voglio visualizzare le note complete sotto forma di un suggerimento del mouse sopra la riga della griglia (o se possibile esattamente sulla cella). C'è un modo per raggiungere questo obiettivo? Qualsiasi aiuto sarebbe molto apprezzato. Grazie in anticipo.

Answer 1

Pubblicare la risposta in quanto potrebbe aiutare qualcuno.

ho ottenuto che il lavoro dopo aver fatto questo ...

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

ho appena aggiunto HtmlAttributes (new {title = "# = # completeNotes"})

Così ora quando ho posto il mouse sopra i dati della colonna Descrizione, ottengo le note complete come suggerimento.

Answer 2

L'utilizzo di un widget di terze parti è anche una possibilità. Ho aggiunto qtip suggerimenti per le intestazioni delle colonne come questo

KendoUI colonna della griglia elemento dell'array

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

Il modello di intestazione

<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> 

generatore 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 
};