.NET Tutorials, Forums, Interview Questions And Answers
Welcome :Guest
 
Sign In
Register
 
Win Surprise Gifts!!!
Congratulations!!!


Top 5 Contributors of the Month
david stephan

Home >> Articles >> SharePoint >> Post New Resource Bookmark and Share   

 Subscribe to Articles

How to Hide Column Name in List Grouped View in SharePoint

Posted By:Jean Paul       Posted Date: August 30, 2014    Points: 200    Category: SharePoint    URL: http://www.dotnetspark.com  

In this article we will explore how to hide the Column Name from List grouped-view.
 

This is a real-world scenario where our client wanted to hide the column-name in list grouped-view.

image

We need to hide the portion highlighted in yellow.

How to hide it?

As you know, the web part does not have any pre-defined property to hide the column name & the colon (:).

We can use JavaScript Or CSS for hiding it.  I am opting the second option here.

We can use SharePoint Designer to edit the page Or use content editor web part to attach the CSS to the page.  I am using the second option here.

The Trick

Open the site in Internet Explorer & Press the F12 button (Developer Tools)

image

Drag the pointer over column name & find the class name.  Here it is ms-gb.  We can use the column name to hide the column.

Solution

Please follow the steps below.

Step 1: Open the list page

image

Step 2: Edit the page

Edit the page & Insert Content Editor web part.

image

Click on the highlighted area & then from toolbar choose HTML > Edit HTML Source.

image

Step 3: Paste Code

Paste the following code into the HTML Editor.

<style>

.ms-gb a:first-child{
  display:block;
  visibility:hidden;
}

.ms-gb a:link > img {
  display:inline;
  visibility:visible;
  position:relative;
  top:13px;
  right:5px;
}

</style>

image

The first block of CSS hides class first child of class: ms-gb.

The second block of CSS pulls the image (+ sign) up.

For hiding the list header, you can insert the following code too:

.ms-viewheadertr

{

display:none;

}

Please note that the visibility:hidden makes the control invisible, but spaces will be allocated.  The display:none makes the control invisible without adding spaces.

Step 4: Test the code

Save the changes to web part, page & Refresh the page.

You can see the following result.

image

Summary

In this article we have explored how to hide the Column Name from List grouped-view.


 Subscribe to Articles

     

Further Readings:

Responses

No response found. Be the first to respond this post

Post Comment

You must Sign In To post reply
Find More Articles on C#, ASP.Net, Vb.Net, SQL Server and more Here

Hall of Fame    Twitter   Terms of Service    Privacy Policy    Contact Us    Archives   Tell A Friend