Forum Discussion
Modifying grouped list headers
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') } });
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:
I copied your code and added it to the page, and nothing changed. I tried using a CEWP and a Script Editor web part, same result. As for your reference to this page - https://github.com/oneuijs/You-Dont-Need-jQuery - I have no idea what to do with that. Thanks anyway.
I got an email that there was another response from Danny Engelman ... but I don't see it here?
- | I got an email that there was another response from Danny Engelman ... but I don't see it here?
I posted an answer with no-Jquery code here ... but I don't see it anymore. I do get emails for every reply.
This forum sucks..
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 was able to apply the css to hide the item counters, worked great - thanks!
No idea what to do with the rest of what you said, but I'm happy with just hiding the numbers.
