3

Is there any way I can show/hide entire column in Views Table?

Exclude from Display completely excludes the column which is not possible to show again, so, I am using Views Dynamic Fields Module to exclude the column initially and showing it when the filter is checked. Like in the picture, the initial view when Column is hidden using Views Dynamic Fields module.

enter image description here

When the Nick Name checkbox is checked the column is shown like:

enter image description here

However, I want to hide the Name Column entirely when Nick Name is shown.

I initially tried it with jQuery like:

// Hide the Name Column when Nick Name is shown
$('#edit-dyfield-field-girls-nickname').change(function() { // id of checkbox
                if ($('#edit-dyfield-field-girls-nickname').is(':checked')) {
                    $('.views-field-title').hide(); // Title points to Name field so all the th td have this class in Name
                }
            });

But it hides both Name and Nick Name for a while, and shows both fields again.

Any solution Drupal based or some tricks with jQuery/JavaScript would be fine, thank you.

2

I am not sure if this is The Drupal Way to fix this, but I fixed it with jQuery hide() and show().

// Hide the Name Column when Nick Name is shown
$('#edit-dyfield-field-girls-nickname').change(function() {
                if ($('#edit-dyfield-field-girls-nickname').is(':checked')) {
                    $(document).ajaxStop(function() { // Forcefully stopping Ajax function in the page as other ajax load was main culprit in my case
                        $('.views-field-title').hide();
                    });
                }

                if ($('#edit-dyfield-field-girls-nickname').is(':not(:checked)')) {
                    $(document).ajaxStop(function() {
                        $('.views-field-title').show();
                    });
                }

            });

Note: In the above example jQuery toggle() doesn't work, so, I have to put 2 if(){} statements for Check and UnCheck.

1

You could use Views MediaTable module.

Not sure if this is the exact use case you are after. this will allow the user to select the columns they want to see.

Views MediaTable integrate the functionality of MediaTable(http://consulenza-web.com/jquery/MediaTable/) into the Views module Table display, allowing the creation of dynamic & responsive Views tables where end users can choose to show or hide certain columns. This module also allows certain table column to behave responsively, hiding the less relevant data in smaller screen sizes.

The js code you used should also do the trick. But the issue you are facing is due to ajax loading. so you will have to put in drupal behavior so it gets called even after the ajax call.

You can check out the below link for more information regarding adding js

Managing JavaScript in Drupal 7

  • I have already used that module, its great for responsive table when the size of viewport shrinks, it hides the columns entirely, but it doesn't have option to use how I want with checkbox. – user12947 Nov 16 '13 at 15:11
  • Can you please elaborate this line you will have to put in drupal behavior so it gets called even after the ajax call I guess I am stuck here, if you could help me do this then jQuery trick is fine. BTW I have that jQuery code inside (function($, Drupal, window, document, undefined) { Drupal.behaviors.my_custom_behavior = { attach: function(context, settings) { // Mycode })(jQuery, Drupal, this, this.document); – user12947 Nov 16 '13 at 15:12
  • Let me get your requirement correct. you want a check box and when it is clicked you want to hide name and display nickname. and when unchecked you want to display the name and hide the nickname. Is that right? – Mohammed Shameem Nov 16 '13 at 15:23
  • yes sir, that's what I have been trying to acheive – user12947 Nov 16 '13 at 17:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy