Click here to Skip to main content
Click here to Skip to main content

Tagged as

Hide column in SharePoint custom list based on values

, 10 Sep 2011
Rate this:
Please Sign up or sign in to vote.
Hide column in SharePoint custom list based on values

There are certain requirements when creating a new item in the SharePoint custom list user has to hide certain columns based on other value. There are two different ways to achieve it:

  1. Server side
  2. Client side

In Server side, we need to write our WebPart and add the webpart to the new form of the list and close the default one. In this, you have full control of the controls and life cycle. But the pain lies in the deployment and maintaining the code. The advantage is that we have full control and the webpart and flexibility to achieve any kind of validations.

In Client side, it can be achieved using JavaScript, especially using the Jquery. I'm a big fan of JQuery and I'll be using the second option to achieve it in this blog.

  1. Edit the new form and add CEWP to the form.
  2. Change the chrome state to none, we don't want to see the webpart title. It's meant to be invisible to the end users.
  3. In the HTML view of the CEWP, add the below code snippet.
  4. Change the HideColumn function parameters based on your columns in the custom list.

That's it! Try to add a new item to the list, and based on the column values the other column will get hidden in the code. I have used check box and text field. Based on check box, I'm deciding here whether to show or hide the column.

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.5.js">
</script>  
<script type="text/javascript">
function HideColumn(targetColumn, hideColumn) {  
	var columnObj = $("input[Title='" + hideColumn + "']");
	$("input[Title='" + targetColumn + "']").bind('click',function() { 
		
        if($(this).is(':checked')) { 			      
			columnObj.closest("tr").hide();
         }
		 else {
			columnObj.closest("tr").show();
		 }
	});		 
   }
   
 $(document).ready(function() {
		HideColumn('YourCheckboxcolumn','columntobehidden');
    });
</script>

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Rajesh.Sitaraman
Architect
United States United States
I'm interested in C#, AJAX, SilverLight,and SharePoint now. I enjoy listening to music, movies, driving.
I love posting answers to forums, especially questions related to SharePoint Technology. Started career as c++ developer, then .Net Mobile Technologies and SharePoint now.
Follow on   Twitter

Comments and Discussions

 
QuestionCode help PinmemberSharepoint coder new22-Jan-13 8:51 
Hi Rajesh
 
I am pretty much new to Sharepoint as well as Jquery . I tried to understand this code and implement on my end but for some reason, i was unsuccessul in doing it. What i am doing is , Based on the dropdown values (there will be two), I want to show two different text boxes. How can i do that . The values of the Text boxes are Coder, Developer .any help will be appreciated
GeneralMy vote of 5 [modified] PinmemberJukoi3-Jul-12 7:43 
QuestionSensible data PinmemberHaBiX5-Oct-11 20:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140814.1 | Last Updated 10 Sep 2011
Article Copyright 2011 by Rajesh.Sitaraman
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid