Sunday, March 13, 2011

Hide List Columns on Display, Edit and New Forms using JQuery

Follow the steps below to quickly hide List Columns on Display, Edit and New Forms using JQuery:
1) Create a scripts library in your site (or use the one you currently use to store your Javascript/*.js files)
2) Download the latest version of the JQuery file from here - http://code.jquery.com/jquery-1.5.1.min.js
3) Copy the above *.js files (namely "jquery-1.5.1.min.js") to the scripts folder created in Step 1
5) Open the form/page (such as NewForm.aspx or EditForm.aspx) where you want to hide editable list columns and add the following script at the end of the page (preferably below the end </style> tag:


<script language="javascript" type="text/javascript" src="/board/scripts/jquery-1.5.1.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
  $(nobr:contains("All Day Event")').closest('tr').hide();

});
</script>
6) Ensure that you replace the List Column name that you want to hide in the above script sample
7) Also note that on DispForm.aspx, you need to slightly modify the above script and look for "h3" tag instead of "nobr" tag in the above script

No comments: