How to Make Editable Grid in Magento

Published On: 20 June 2014.By .
  • Digital Engineering

A grid in Magento provides you the ability to list the information e.g. List of products, orders etc. It also give you facility to perform action in bulk but it does not allow you to send extra information though it e.g you want to change the quantity of the products from the grid. You can change it in bulk but can not assign to individual.

This tutorial will give you step by step instruction to create a grid in which you can also add input fields in columns, send those values to controller and perform releavant action.

I am taking the example of changing the quantity of products in bulk from the grid.

Step 1: create a new module file


Step 2: create config file of the module

Step 3 : create a blank helper class

Step 4 : create a observer to add column in the grid and to add a JS also

//In the above two funtion I have placed 2 condition. One is for controller and other is for product grid. This is because I am adding JS file on the product listing page only so in getControllerName() function I only added product controller and used “productGrid” which is the ID of the product listing grid. If you are modifying any other grid then change these 2 condition accordingly.

Step 5 : Create a renderer to get input field in column


Step 6 : create JS file which will add input field value in the form to send it to the controller.

Step 7 : Last step is to get the post data at the controller and perform action accordingly. Copy this function and paste this in your controller.

This function will return an array which has quantity value for each product. So you have to get value of each product which get selected through Grid. To update the quantity of products,let’s add a action in massaction dropdown and write code for that.

Add following code in the observer in core_block_abstract_prepare_layout_after function


Now we have to create a controller which will get our post data and update the quantity.

So in this way you can add column with input fields in the grid and send information to the controller to perform actions accordingly. The main thing in this tutorial is the JS file which add the input field in the form.

Please provide us the feedback for any suggestion and improvement.

Related content

That’s all for this blog