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.
Five Challenges in SharePoint Security
...And How to Solve Them. Free White Paper
*Sponsored


Check out these SharePoint products:

5 comments :

  1. when grouping is added onto a list, this script always forces the list group to be collapsed. So for every page change it collapses the grouping by default regardless if grouping is set to auto-expand by default

    ReplyDelete
  2. this does not work well with grouping. If grouping is set to auto-expand, this script forces it to auto-collapse. if user then selects expand grouping but then tries to click to go onto a new page this script forces the group to auto-collapse again... :(

    ReplyDelete
  3. I have tried this one in sharepoint 2010, after changing the path to a local jQuery + changing the path to some local copy of menudark.gif
    still not working for me.

    can you please assist?

    ReplyDelete
    Replies
    1. Naama,
      When you said "local" copy, Is that file from 14 hive?

      Delete
  4. Awesome Code .. Works like charm !!!

    ReplyDelete

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...