गतिशील रूप से कॉलम

Question

के केंडो ग्रिड पंक्तियों में टूलटिप्स जोड़ें, मेरे पास पंक्तियों में प्रदर्शित कुछ नोट्स वाला कॉलम है। चूंकि नोट्स विशाल हैं, इसलिए मैंने नियंत्रक में नोट्स को छोटा कर दिया है और इसे मेरे एएसपीएक्स पेज पर भेजा है। मैं जो हासिल करना चाहता हूं वह है, मैं ग्रिड पंक्ति (या यदि सेल पर संभव हो तो) पर माउस पर टूल टिप के रूप में पूर्ण नोट्स प्रदर्शित करना चाहता हूं। क्या इसे प्राप्त करने का कोई तरीका है? किसी भी मदद को बहुत सराहा जाएगा। अग्रिम में धन्यवाद।

Answer 1

उत्तर पोस्ट करना क्योंकि यह किसी की भी मदद कर सकता है।

मुझे मिल गया है कि ऐसा करने के बाद काम कर रहे ...

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

मैं सिर्फ HtmlAttributes जोड़ लिया है (नए {title = "# = completeNotes #"})

तो अब जब मैं जगह विवरण कॉलम डेटा पर माउस, मुझे टूल टिप के रूप में पूर्ण नोट्स मिलते हैं।

Answer 2

किसी तृतीय पक्ष विजेट का उपयोग करना भी एक संभावना है। मैं qtip सुझावों स्तंभ शीर्ष लेखों को यह

KendoUI ग्रिड स्तंभ सरणी आइटम

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

हैडर टेम्पलेट की तरह गलत के लिए

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

टूलटिप जनरेटर

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