I've got a List View on a SmartForm, and I don't need headers on the columns because of how my data is set up. I can remove the text label from the headers, but I can't figure out how to get rid of the solid horizontal bar that displays at the top of the View where the headers would go.
Is this possible?
Solved
Can you hide or remove column headers on a list view?
Best answer by Kran
Hi RoryTheRoman,
To remove the Header bar use jQuery or JavaScript.
Use browser inspect option to first get the CSS selector path for header, and the use below script
<script>
$( document ).ready(function() {
$("Selectorpath").css('display','none');
});
</script>
After adding selector path it should be like
<script>
$( document ).ready(function() {
$("#_3a166218-f9*personal details removed*fc7-a8da-2e0861c3ddef > div.grid-body > div.grid-column-headers").css('display','none');
});
</script>
Add Data Label, with property type Literal as checked and add above script in expression property.
Let me know if this helps you.
Hi,
You can make the column header titles invisible through the View's header properties but it isn't possible to remove the entire header bar.
+9Hi RoryTheRoman,
To remove the Header bar use jQuery or JavaScript.
Use browser inspect option to first get the CSS selector path for header, and the use below script
<script>
$( document ).ready(function() {
$("Selectorpath").css('display','none');
});
</script>
After adding selector path it should be like
<script>
$( document ).ready(function() {
$("#_3a166218-f9*personal details removed*fc7-a8da-2e0861c3ddef > div.grid-body > div.grid-column-headers").css('display','none');
});
</script>
Add Data Label, with property type Literal as checked and add above script in expression property.
Let me know if this helps you.
+9This works fine, make sure you are using proper Selector ID and DataLabel property literal is checked.
Let me know if this helps you.
I haven't gotten it to work for me, but that's because we're using K2 nested inside DNN, which is a whole other level of complexity. It does sound like it would work well on just K2, though.
I just landed on my own old post from a google result. Weird. Anyway, figure I should post what I wound up going with.
I created a data label on my view, marked it as visible=false and literal=true, and set it to use an expression which contains this script.
<script>$(document.getElementsByClassName('grid-column-headers'))[0].style.display = 'none';</script>
Obviously this will get a little messier if you have multiple list-views on the same form, and don't want to hide the column headers on all of them, but it works when there is only one list-view.
+9Hi RoryTheRoman,
As mentioned in earlier post , you need use proper Selector when working with this.
When you us grid-column-headers as selector it will select all Views, and apply changes to all of them.
If in case you want to do for specific view then instead of class name use id of view, as it will be unique and help you to achieve your result.
Thanks,
Kran
As mentioned in earlier post , you need use proper Selector when working with this.
When you us grid-column-headers as selector it will select all Views, and apply changes to all of them.
If in case you want to do for specific view then instead of class name use id of view, as it will be unique and help you to achieve your result.
Thanks,
Kran
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.