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

Top 5 Contributors of the Month
Imran Ghani

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.


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)


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.


Please follow the steps below.

Step 1: Open the list page


Step 2: Edit the page

Edit the page & Insert Content Editor web part.


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


Step 3: Paste Code

Paste the following code into the HTML Editor.


.ms-gb a:first-child{

.ms-gb a:link > img {



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:





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.



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

 Subscribe to Articles


Further Readings:


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