Saturday, January 18, 2014

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.
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<script type="text/javascript">
 
if(typeof jQuery=='undefined'){
 
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


Read more: http://www.sharepointdiary.com/2010/07/expand-collapse-for-multiline-text.html#ixzz2qpJQq1uq


Reference:
http://www.sharepointdiary.com/2010/07/expand-collapse-for-multiline-text.html

No comments:

Post a Comment

Image noise comparison methods

 1. using reference image technique     - peak_signal_noise_ratio (PSNR)     - SSI 2. non-reference image technique     - BRISQUE python pac...