Dynamicznie dodawaj podpowiedzi do wierszy siatki kendo w kolumnie

Question

Mam kolumnę z notatkami wyświetlanymi w wierszach. Ponieważ notatki są ogromne, odciąłem notatki w samym kontrolerze i wysłałem je na moją stronę aspx. Chcę osiągnąć to, że chcę wyświetlić pełne nuty w postaci końcówki narzędzia na myszy nad rzędem siatki (lub, jeśli to możliwe, dokładnie na komórce). Czy jest jakiś sposób, aby to osiągnąć? Każda pomoc będzie bardzo ceniona. Z góry dziękuję.

Answer 1

Zamieszczanie odpowiedzi, ponieważ może to pomóc każdemu.

mam, że praca po zrobieniu tego ...

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

Właśnie dodany HtmlAttributes (nowa {title = "# = completeNotes #"})

Więc teraz, kiedy miejsce kursor myszy nad danymi w kolumnie Opis, otrzymuję kompletne notatki jako wskazówkę narzędzia.

Answer 2

Korzystanie z widgetu innego producenta jest również możliwe. Dodałem qtip wskazówek nagłówkach kolumn jak to

KendoUI kolumna grid array item

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

szablonie nagłówka

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

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