none
how to hide specific column in xsltlistview RRS feed

  • Question

  • in my custom spfieldobjectlookup field type, i have a custom boolean property to control whether this field will show as treeview filter in list view page.

    but list can have multiple views, and user can add and delete views. so, the setting should be associated with list views, instead of at spfield level. But i cannot find any custom property bag (like the allproperties in spweb) in SPView.  As a workaround, i can keep an array of view id in the custom field type.  But if the view is deleted, the corresponding id in custom field type setting become invalid.  So, the best thing is to have a view level setting.

    I am thinking of adding a dummy related field into the list, named something like "TreeView_theRealFieldName". If user want to show "theRealFieldName" as treeview filter in specific view, he can select the "TreeView_theRealFieldName" in view settings, this is a view level setting.

    But the problem is, the "TreeView_theRealFieldName" field itself will be displayed in list view as a column.

    Anybody knows how to make a field selectable in view settings page, but never really displays in the view? Are there any OOTB field types works in this way? or can i hide specific column in list view with custom xslt? There are offical documents about deploying "fldtypes_yourfieldtypename.xsl" to change the list view field rendering. But how to hide the column including column header?

    in OOTB xslt for list view, i can find something like

    <xsl:call-template name="headerfield.Created">

    <xsl:call-template name="headerfield.ContentType">

    But my xslt skill poor, i don't know how to modify the OOTB xslt to achieve this.



    • Edited by GuYuming Wednesday, November 27, 2019 1:17 AM
    Wednesday, November 27, 2019 1:16 AM

Answers

  • Hi,

    If don't want a field real show in  the list view, please add the JavaScript code snippet code into the list view page using Content Editor Web Part:

    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    		$(function () {
    			 HideFieldByName("Test2");
    		});
    
    
            function HideFieldByName(fieldName)
            {
               
    		    var header = document.querySelectorAll("[name=" + fieldName + "]")[0].parentNode;
    			var index = [].slice.call(header.parentNode.children).indexOf(header) + 1;
    			header.style.display = "none";
    		     for (var i = 0, cells = document.querySelectorAll("td:nth-child(" + index + ")"); i < cells.length; i++) 
    		    {
    			  cells[i].style.display = "none";
    		    }
            }
    </script>
    

    In the code snippet above, I'm hiding a filed named "Test2", replace the name with yours, here is the result:

    All columns in the list view:

    Hide Test2 column with the code snippet above:

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, November 27, 2019 8:11 AM

All replies

  • Hi,

    If don't want a field real show in  the list view, please add the JavaScript code snippet code into the list view page using Content Editor Web Part:

    <script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script type="text/javascript">
    		$(function () {
    			 HideFieldByName("Test2");
    		});
    
    
            function HideFieldByName(fieldName)
            {
               
    		    var header = document.querySelectorAll("[name=" + fieldName + "]")[0].parentNode;
    			var index = [].slice.call(header.parentNode.children).indexOf(header) + 1;
    			header.style.display = "none";
    		     for (var i = 0, cells = document.querySelectorAll("td:nth-child(" + index + ")"); i < cells.length; i++) 
    		    {
    			  cells[i].style.display = "none";
    		    }
            }
    </script>
    

    In the code snippet above, I'm hiding a filed named "Test2", replace the name with yours, here is the result:

    All columns in the list view:

    Hide Test2 column with the code snippet above:

    Thanks

    Best Regards


    Please remember to mark the replies as answers if they helped. If you have feedback for TechNet Subscriber Support, contact tnmff@microsoft.com.

    SharePoint Server 2019 has been released, you can click here to download it.
    Click here to learn new features. Visit the dedicated forum to share, explore and talk to experts about SharePoint Server 2019.

    Wednesday, November 27, 2019 8:11 AM
  • Thanks! the js code works for me.

    BTW,  [].slice.call does not work for IE8 mode

    Thursday, December 5, 2019 9:38 AM
  • I modified the code as follows

    <script type="text/javascript">
            function HideFieldByName(fieldName)
            {
               
    		    var header = document.querySelectorAll("tr.ms-viewheadertr [name=" + fieldName + "]")[0].parentNode;
    			var index = [].slice.call(header.parentNode.children).indexOf(header) + 1;
    			header.style.display = "none";
    		     for (var i = 0, cells = header.parentNode.parentNode.querySelectorAll("td:nth-child(" + index + ")"); i < cells.length; i++) 
    		    {
    			  cells[i].style.display = "none";
    		    }
            }
            
            function HideViewFilterFields()
            {
    			HideFieldByName("TopNav_test5");
    		}
    		
    		 _spBodyOnLoadFunctionNames.push("HideViewFilterFields");   
    </script>	


    Friday, December 6, 2019 3:35 AM