Ajouter dynamiquement des info-bulles pour le kendo lignes de la grille d'une colonne

J'ai une colonne avec quelques notes de l'affichage dans les lignes. Depuis les notes sont énormes, j'ai coupé court aux notes dans le contrôleur lui-même et envoyé à ma page aspx. Ce que je veux réaliser est, je veux afficher les commentaires complet sous la forme d'une info-bulle au survol de la souris de la ligne de grille ( ou, si possible, exactement sur la cellule ). Est-il un moyen pour y parvenir? Toute aide serait très appréciée. Merci à l'Avance.

  • Toutes mes excuses pour le mauvais titre. Le titre doit être quelque chose comme ceci "Ajouter un outil de pointe pour le contenu dynamique de kendo de la grille" .
  • Pourquoi ne pas accepter votre solution ?
InformationsquelleAutor Hari | 2012-09-20
  1. 13

    De poster la réponse car elle pourrait aider quelqu'un.

    Je l'ai eu à travailler après avoir fait cela...

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

    J'ai juste ajouté HtmlAttributes(new { titre = "#= completeNotes #" })

    Alors maintenant, quand je place la souris sur la colonne de Description de données , je les Notes comme un outil de pointe.

    InformationsquelleAutor Hari
  2. 3

    L'aide d'un 3ème partie widget est aussi une possibilité. J'ai ajouté qtip conseils pour les en-têtes de colonne comme ce Ajouter dynamiquement des info-bulles pour le kendo lignes de la grille d'une colonne

    KendoUI la colonne de la grille de tableau

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

    Le modèle d'en-tête 

    <link  type="text/css" href="lib/Craga89-qTip2-bfcc9ef/dist/jquery.qtip.min.css"/>
<link  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>

    Info-bulle générateur

    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
};
    InformationsquelleAutor Kristo Aun