Forum Discussion
Solved
Modifying grouped list headers
I'm using a SharePoint list grouped view to show FAQ's, so the view is grouped by "Question" and users can expand the question to see the answer. I'm trying to find a way to hide the item counts - as explained on this page. I would also like to hide the column name (Question) form the grouped view header, as explained on this page.
I was happy to find these instructions, because it's exactly what I'm trying to do, but what does he mean by "remember to refer jquery library?"
I love the coding solutions, they are great.
Love it! Loading a 90 KB jQuery library to do something.Here is your grouped header HTML:
since that <span> has a display inline style, you can't overrule it with display:none
But one line of CSS can hide it:
``
span[style*='lighter'] {color: transparent;}``
Put it in a CEWP on the ListView page, between <style> tags
But coding solutions are great, they really are!
Your second requirement requires scripting because you want to move DOM elements. You want to move the label inside the A tag
)But no need for jQuery, vanilla JavaScript can do that:
var groupedAs=document.querySelectorAll("tbody[id^='titl'] a"); //iterate Nodelist as Array [].forEach.call( groupedAs , function(A) { if(A.nextSibling){ // change this DOM element once when there is a label A.firstChild.nextSibling.remove(); // remove fieldname label var value=A.appendChild(A.nextSibling); // move label inside A tag value.nodeValue=value.nodeValue.split(' : ')[1]; // remove colon A.nextElementSibling.remove(); // remove counter after A } else { console.warn('ran code twice') } });
I love the coding solutions, they are great.
Love it! Loading a 90 KB jQuery library to do something.Here is your grouped header HTML:
since that <span> has a display inline style, you can't overrule it with display:none
But one line of CSS can hide it:
``
span[style*='lighter'] {color: transparent;}``
Put it in a CEWP on the ListView page, between <style> tags
But coding solutions are great, they really are!
Your second requirement requires scripting because you want to move DOM elements. You want to move the label inside the A tag
But no need for jQuery, vanilla JavaScript can do that:
var groupedAs=document.querySelectorAll("tbody[id^='titl'] a"); //iterate Nodelist as Array [].forEach.call( groupedAs , function(A) { if(A.nextSibling){ // change this DOM element once when there is a label A.firstChild.nextSibling.remove(); // remove fieldname label var value=A.appendChild(A.nextSibling); // move label inside A tag value.nodeValue=value.nodeValue.split(' : ')[1]; // remove colon A.nextElementSibling.remove(); // remove counter after A } else { console.warn('ran code twice') } });- that technique is using jQuery library, so you need to include that library to your pages: <script src"....jquery.js"... you can do that in some different ways, like customising a master page, but I suggest to use a Custom Action to inject the script.
Thank you for your response, but I'm a novice, and I'm not sure what you're saying. My plan was to add a CEWP to the page where I've added the list web part (or should I use a Script Editor web part?), is there something I should add to this code, as referenced in the link I posted? I do NOT want to modify the master page.
Use below script in CEWP, remember to refer jquery library.
$("table.ms-listviewtable td[class=’ms-gb’]").each(function() {
//Hide all Counts for Groups
$(this).find("span:last").remove();
});
If you just need it in one page, then just add a Script Editor WebPart with something like this:
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script> <script type="text/javascript"> $("table.ms-listviewtable td[class=’ms-gb’]").each(function() { //Hide all Counts for Groups $(this).find("span:last").remove(); }); </script>It's the same code from the article, but adding a reference to load jQuery library.
Keep in mind that you're adding a big library (jQuery) to solve a small problem that could be fixed with just JavaScript, without adding jQuery library. If you want, take a look to this page to find out how you could do the same functionality with just JavaScript:
