Thursday, July 9, 2009

Expand-Collapse for Multiline Text columns in Sharepoint

Some times, when working with the Multiline fields, they may occupy the whole page :-).

We can solve this issue by introducing Expand-Collapse Trick with jQuery. On clicking on the little Arrow that row will be expanded, then again clicking will collapse.
Expand-Collapse for Multiline Text columns in Sharepoint

Here is How: Add the CEWP webpart and place the below code, then hide the webpart.
<script type="text/javascript">

if(typeof jQuery=='undefined'){

var jQPath = 'https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
document.write('<script src="',jQPath,'" type="text/javascript"><\/script>');
}
</script>
<style type="text/css">
.expandText {height:auto;}
.collapseText {height:28px;overflow:hidden}
</style>
<script type="text/javascript">
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
$("#tbod"+groupName+"_").attr("isloaded",isLoaded)
.html(htmlToRender)
.show("fast",collapseText("#tbod"+groupName+"_"));
}

function collapseText(group){
if (!group) group = "#MSO_ContentTable";
var html ="<img alt='collapseText' style='cursor:pointer;' src='/_layouts/images/menudark.gif'/>";
$(group+" td.ms-vb2>div").each(function(i,e){
$(e).css({display:"inline-block"});
if (e.clientHeight > 35){
$(e).toggleClass("collapseText")
.prepend(html);
}
});
$(group+" img[alt='collapseText']").click(function(event){
$(event.target).parent().toggleClass("collapseText");
});
}
$(function() {
collapseText();
});
</script>
<style type="text/css">
.ms-vb{
vertical-align: middle
}
.ms-vb2{
vertical-align: middle;
}
.ms-vh2-nograd
{
text-align: center;
}
</style>

Thanks to: https://www.nothingbutsharepoint.com/sites/eusp/Pages/jquery-for-everyone-collapse-text-in-list-view.aspx?replytocom=15961

Other ways:
Codeplex project: http://spcollapser.codeplex.com/

Jquery: http://www.myrocode.com/post/2009/04/22/Collapse-or-Expand-SharePoint-web-parts-in-your-pages-get-OpenCloseWps.aspx
http://fitandfinish.ironworks.com/2010/02/how-to-expand-collapse-web-parts-in-sharepoint-using-jquery.html

You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.
*Sponsored


You might also like:

Related Posts Plugin for WordPress, Blogger...