How to manipulate Grid format view using draggable Views Module in Drupal 7

Parent Feed: 

Draggable grid view makes views to be altered and rearranged as drag and drop. This is achieved by using javascript which allows drag and drop on HTML tables. In this blog, I will discuss about an instance where I used the Views Module to manipulate the grid format in Drupal 7.

The process of reordering the views can be done with the help of Drupal draggable  views module. With the help of the module we can easily re-order the table format, but if we want to reorder the  grid format, it requires some modification in the views that is created. In this blog I will be explaining about Drupal grid view which is the view that is visible for the user. 

You can download and install the module using drush commands drush dl draggableviews -y and then drush en draggableviews -y

After downloading and installing the module, the setup for the draggable views module is completed. 

Creating View:

We have to create 2 views , in order to create a re-orderable grid format view. In the first view we will create a view for the table format. It is the format generated when the module is installed then we can create another view of grid format(any format also possible).
To create a view  for the above process of table format, please follow the following  steps

  • Go to the link  admin/structure/views/add and create a page view of particular content type
  • Save the view and continue to add the format and field section in the view
  • In the format section please select the table format and  leave the settings options for the default values
Tableformat
  • In the field section add the following fields title, image( please add the field of  a particular content type you want to re-order, I have chosen image field to re-order) and Draggableviews: Content
  • Some configuration should be done for the Draggableviews: Content , please click on it and follow the uploaded image

Draggableconfiguration

  • Now we have to add a sort criteria , the sort criteria field will be updated with Draggableviews: Weight (asc). It can be ascending or descending based on the requirement. Now we have to set some configuration for the field, so please follow the image for the configuration

Sorting draggableviews

  • Save the view, now we are able to reorder the table format view.

Now we should create a view for the grid format mode. Creating Grid format mode view is similar to table format view. Please follow the below steps to create a view for that.

  • Go to the link  admin/structure/views/add and create a page view of particular content type
  • Save the view and continue to add the format and field section in the view
  • In the format section please select the grid format and  leave the settings options for the default values
  • In the field section add the following fields title, image( please add the field of  a particular content type you want to re-order, I have chosen image field to re-order) 
  • Now we have to add a sort criteria , the sort criteria field will be updated with Draggableviews: Weight (asc). It can be ascending or descending based on the requirement. Now we have to set some configuration for the field, so please follow the image for the configuration.

Gridsorting

In the image there is a field called Display Sort as, we have to set table formatted view name because, this view (grid formatted) will be sort based on the previous view (Table formatted view). Save the view, now you will be able to control the grid formatted display in any order.

After saving the view place the link in menu to see the operation.

  • Go to admin/structure/menu/manage/main-menu, to place the menu, I have choosen main menu the user can choose any menu, for placing the menu links.

Output:
The output has some procedures in displaying the view in any order. I will be describing with the help of image for the output. The Drupal drag and drop facility can be achieved for the users using Drupal draggableviews module. 

Grid formatted output

In the image there is quick edit menu button, if you click on that you will get two options 

  • Edit view
  • Order View

We have to click on order view , to change the order of the view displayed in the image.

order viewbutton

If we click on the order view it will be redirected to the view of table formatted, here we will change  the order of the view, it is a Drupal drag and drop format where the user can change the order of the items, and if order is changed and updated it will be affected in the Drupal grid view format.

Table formattedoutput

Now the order in the view is  E->B-> C-> D-> A in both the images, we can bring the order to A->B-> C-> D-> E , by altering the order in table formatted view.

Reordered image as per the above condition

output

In the end, now we are able to re order the video of grid format using the draggable views module but the above method can be done only by the admin who has privileges.

Author: 
Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web