How to hide a listView control column


Badge +10

I need to hide the edit column in a list view control, I have using a view in the list to display the column in a listView contorl. The idea is to to hide the column based on condition on form load.

211939_pastedImage_1.png

I have tried this NWF$("div[name='Edit']").hide();

but it only erase that text not the column.

thanks


17 replies

Userlevel 5
Badge +14

try following

NWF$('.myLV table.ms-listviewtable th:nth-of-type(4)').hide();
NWF$('.myLV table.ms-listviewtable td:nth-of-type(4)').hide();‍‍

this hides 4th column in listview control

listview control‌

Badge +10

Great!!, Thank you Marian. It worked.

Badge +10

Hi Marian,

The above code used to work on Nintex From 2.11.1.0 and now it is upgraded to 2.11.4.20 and the header is not showing at all. The listview header text is hidden but the header row is visible. I can see the sort arrow.

Userlevel 5
Badge +14

I'm sorry, I do not have installed that release yet....

could you post a screenshot how is exactly look like?

and how does control's DOM looks like?

Badge +10

Thanks Marian,

Actually I am hiding the first column, but if I hide second or other columns the heading appears. Below is the screen shot when I hide the first column.

221454_pastedImage_1.png

Here is the first column DOM

221455_pastedImage_2.png

Here is the listview DOM

221468_pastedImage_3.png

Userlevel 5
Badge +14

hm, from your screenshots, selector up to: NWF$('.myLV table.ms-listviewtable') should still work (based on 'listview DOM'). unfortunately, but I do not see what's going on further  down the tree...

form the 'first column DOM' screenshot I'm not able to identify where exactly this snippet is from - how deep within 'ms-listviewtable' it is.

and from very first screenshot of  how does hidden column looks like, it looks like to me there is something (dropdown/filter??) what haven't used to be there before (or at least I haven't experienced it yet).

so it looks to me overall listview DOM has changed, but from screenshots provided I'm not able to identify the whole tree.

Badge +10

Thanks for your time Marian,

Just attaching another screen shot, hope it gives you the full view of the tree, thanks for the help.

221546_pastedImage_1.png

Userlevel 5
Badge +14

that still seems to be too less.

could you copy out whole (sub)tree from DIV.LVSession and attach it as a text snippets? 

Badge +10

Hi Marian,

Attaching the file along with this. Let me know if have not received.

Regards and thanks.

Sojan

Userlevel 5
Badge +14

yes I can see the attachment.

but from what you've provided above code should still fully work.

I've taken your snippet and let it show in browser (just enabled borders for better visual experience)

221606_pastedImage_1.png

applied code from above and 4th column (Venue Details) got correctly hidden

221607_pastedImage_2.png

Badge +10

Thanks for your time Marian,

Yes you are right, the problem is only if we hide the first column as I mentioned in one of my previous reply. Thanks again,

Userlevel 5
Badge +14

aah, I see.

then try this code

NWF$('.LVsession table.ms-listviewtable>thead>tr>th:nth-of-type(1)').hide();
NWF$('.LVsession table.ms-listviewtable>tbody>tr>td:nth-of-type(1)').hide()‍‍‍‍;
Badge +10

Thanks Marian, but it didn't work.

Userlevel 5
Badge +14

I've tested it on your snippet and it worked for me...

How does it behave? Does it throw any error?

Badge +10

Thanks Marian, It is working , Wonderful.

I copied the the code that you send me , which was pretty much the same except the LVsession, it was LVSession for me.

Thanks a lot again happy.png

Badge +10

Sorry Marian, I keep bothering you,

Is there a way to hide "There are no items to show in this view of the "xxxx" list. To add a new item, click "New"."

I used to hide this with NWF$("ms-vb").hide(); 

But now in the new version, it is not working.

Badge +10

Just ignore this above issue, got fixed by

NWF$(".LVSession td.ms-vb:contains('There are no items')").text("");

Thanks for the help

Reply