6

I have a view that returns a 4 column grid view. The client wants to be able to toggle between grid results and teaser results by clicking on an icon.

Does Views handle this naturally? Do I need to utilize AJAX?

1
  • Anyone coming here 10 years later: a quick and easy way is using the Style Switcher module.
    – markdc
    Nov 13 at 21:29

4 Answers 4

1

This Views mode module should be able to do this, however it is still in development version. Make sure to test it out on a development site before using it on a production site

A Drupal Views display plugin which provides alternate display modes that can be switched to for a single View. This allows exposed filter parameters or contextual filters to be kept active while switching display mode.

2
  • Oh, I didn't know about the Views_display module! So I was using a normal block or codes in header of the views and get the url parameters for the 2+ different page links either with js or with php. Aug 26, 2013 at 21:38
  • For Drupal 9/10 try the VIews Display Switch module.
    – markdc
    Nov 13 at 18:52
2

If you want to do something like this,

enter image description here then you can use QuickTabs Module

So, here user can switch from TAB-ONE to TAB-TWO .. so on ..

To implement this, first you have to create View-Blocks and then you have to create Quick Tabs by using QuickTabs Module

Here is one Video Tutorial to create QuickTabs.

1

You can also create two views, one displays as a list and the other display as a grid. Each has its own url. As an example: View a list and a grid of music artist: 1 list view of artists, display as list, url=/music/artist&display=list 2 grid view of artists, displays as grid, url=/music/artist&display=grid

on both pages, create a header, Global: text area: and enter something like:

<a href="/music/artists&display=list" title="Show as list"><i class="fa fa-list"></i></a>  <a href="/music/artists&display=grid" title="Show as grid"><i class="fa fa-th"></i></a>

PS i use fontawesome for icons.

This way you can have two pages, same content present in its own way, using a switch on top of both pages. Easy!

1

Studio Orange's answer is a good lightweight solution, though I'd like to add a couple of points to improve upon it (cannot post comments yet).

To make the view retain filters and page number while switching displays, you need some PHP and as using the PHP filter in the text area of the view is not too good of a practice, it's preferable to attach a header programmatically by implementing hook_views_pre_view().

For the link to retain page and filter values you will have to use the l() function along with drupal_get_query_parameters().

Take a look at the blog post I wrote for more details.

Your Answer

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

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