•  04-10-2020
  •  | 
  •  

Question

I am trying to collapse my sharepoint list where I have large text columns, basically following the same code snippert as mentioned here

http://www.bitsofsharepoint.com/ExamplePoint/Site/ListExpandTextField.aspx

and

https://social.technet.microsoft.com/Forums/en-US/14f1b91e-b935-46d3-a95c-cafae852a21a/sharepoint-list-item-row-height?forum=sharepointcustomizationlegacy

but I am having problems getting it to work for SP2013

The code that I add as a CEWP at the top of the list page is as follow

<html>
<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:26px;overflow:hidden}
</style>
<script type="text/javascript">
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
alert('Point 1');
    $("#tbod"+groupName+"_").attr("isloaded",isLoaded)
            .html(htmlToRender)
    .show("fast",collapseText("#tbod"+groupName+"_"));
}
function collapseText(group){
alert('Point 2');
if (!group) group = "#MSO_ContentTable";
alert('Point 3');
   var html = "<img alt='collapseText' style='cursor:pointer;' src='https://.../menudark.gif'/>";
alert('Point 4');
    $(group+" td.ms-vb2>div").each(function(i,e){
    alert('point 5');  
           $(e).css({display:"inline-block"});
               alert('point 6');  
                  if (e.clientHeight > 35){
                $(e).toggleClass("collapseText")
             .prepend(html);
        }
    });
    $(group+" img[alt='collapseText']").click(function(event){
                alert('point 7');
        $(event.target).parent().toggleClass("collapseText");
    });
alert('Point 8');
}
$(function() {
alert('point 9');
   collapseText();
alert('point 10');
});
</script>
</html>

When displaying the list, the alert trace is as follows:

Point 9 Point 2 Point 3 Point 4 Point 8 Point 10

There seems to be some problem with the code $(group+" td.ms-vb2>div").each(function(i,e){

Has anyone used this code for SP2013?

Thanks for any help!

Was it helpful?

Solution

Instead of using Jquery to manipulate the view of columns in your SharePoint list, I'll suggest you to use Client Side Rendering (CSR), it's very powerful and would suit your need. You can write HTML for your need.

(function () {
    // Create object that have the context information about the field that we want to change it output render  
    var linkFieldContext = {};
    linkFieldContext.Templates = {};
    linkFieldContext.Templates.Fields = {        
        "Comments": { "View": CommentRendering}

    };
    SPClientTemplates.TemplateManager.RegisterTemplateOverrides(linkFieldContext);
})();

function CommentRendering(ctx)
{
    var htmlStr = "";
    var itemId = ctx.CurrentItem.ID;
    var itemTitle = ctx.CurrentItem.Title
    htmlStr += "<input id='click"+itemId+"' type='button' value='click me'></input>";                    
    return htmlStr;
}

This will render your multline text field as button but you can manipulate it to show any html content.

Licensed under: CC-BY-SA with attribution
Not affiliated with sharepoint.stackexchange
scroll top