0

I want to display a view in both grid and list style, and allow the users to explicitly select the format in which they want to view (Like the picture below) enter image description here

The JQuery which I used is

(function ($) {
    Drupal.behaviors.mytheme = {
  attach: function (context, settings) {       
    $('#content').once('course-view', function() {

  if ($(".view").hasClass("course-view")) {
    $(".view").addClass("grid-view"); // Sets .grid-view as default class on the view

    $(".list").click(function() {      
      if ($(".view").hasClass("grid-view")) {
        $(".view").addClass("list-view"); // adds .list-view to the view class
        $(".view").removeClass("grid-view"); // removes .grid-view from the view class
      }
    });

    $(".table").click(function() {
      if ($(".view").hasClass("list-view")) {
        $(".view").addClass("grid-view"); // adds .grid-view to the view class
        $(".view").removeClass("list-view"); // removes .list-view from the view class
      }
    });
  }
});
  }
    };
    })(jQuery);
4
  • 1
    May be adding two views can do this like /grid for grid view and /list for list view. Commented Nov 11, 2014 at 6:42
  • In that case i have to create two different views, but i want this to happen only by using a single view.
    – Pooja
    Commented Nov 11, 2014 at 6:43
  • 1
    Try this drupal.org/project/views_modes. Commented Nov 11, 2014 at 6:45
  • Its a dev version, you can test it on local site. Commented Nov 11, 2014 at 6:45

3 Answers 3

0

Try this: For this you need one instance of your view. No clone required.

Note: You need to set your view format to grid by default.

In view header, add Global custom text and add below HTML for toggle between grid and list.

<div><span>View:</span><a class="grid" href="#">Table</a> <a class="list" href="#"> List</a> </div>

In template.php

function mytheme_preprocess_views_view(&$vars) {
  $view = &$vars['view'];
  // Make sure it's the correct view
  if ($view->name == 'participant_list') {


    // add needed javascript
    drupal_add_js(drupal_get_path('theme', 'mytheme') . '/script.js');

    // add needed stylesheet

  }
}

script.js (add in the custom theme)

    (function ($) {
    Drupal.behaviors.mytheme = {
    attach: function (context, settings) {      
       $(".list").click(function() {      
         $( "div.view-participant-list" ).find("td").addClass("display_list" );
    });

        $(".grid").click(function() {
        $( "div.view-participant-list" ).find("td").removeClass( "display_list");
    });
  }
 };
})(jQuery);

.css

.display_list
{
    display:block;
}

Note: Here div.view-participant-list is selector in my case. You need to find your own.

0

I think Your Question resembles the video tutorial series in Code karate:

Multiple Views Series

Please Check It out... By adding and removing classes when clicking the grid and list icons using jQuery make this done..

2
  • I tried it but its not working, css classes are not being detected.
    – Pooja
    Commented Nov 11, 2014 at 7:11
  • Can you please update your question with jquery you used. Try clearing cache Commented Nov 11, 2014 at 7:14
0

I didn't got your question ? According to the javascript you used the implementation will be achieved.

However the drupal way of doing this is to create another display of the view ( extend it from master ) and render both the views on the same page and write some JS which will hide the list view when grid button is clicked and hide grid view when list button is clicked. One having display format- list having class list view and other having display format : grid having class grid.

$('.list').on('click',function() {
  $('.grid').removeClass('enabled');
  $(this).addClass('enabled');
  $('.grid-view').hide();
  $('.list-view').show();
});
$('.grid').on('click',function() {
  $('.list').removeClass('enabled');
  $(this).addClass('enabled');
  $('.grid-view').show();
  $('.list-view').hide();
});
$('.grid-view').hide(); //default settings
$('.list').addClass('enabled'); //default settings

Considering both options the first option with single view and pure js to handle it is correct way as in either case we need to change the class and generated HTML would be the same.

Moreover, If we have same view repeated twice then its useless to create one more view with the same Markup. As it will obstruct the performance and loading time of the page.

I can give you more detailed advice if you can become more descriptive.

3
  • This isn't working.
    – Pooja
    Commented Nov 11, 2014 at 9:34
  • YOu need to have jQuery ver 1.7 as .on() is included in 1.7 ver Commented Nov 12, 2014 at 13:50
  • @Pujita: If you can be more descriptive . maybe I can help you out with js Commented Nov 12, 2014 at 13:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.