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
- 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
- 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
- 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.
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.
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.
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.
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
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.
