Enhance magento admin grid user experience using ajax

Magento admin grid are very convenient way to filter and paginate. Magento Admin grid provide the CURD operation for product, customer, order and many more entities. One of our client wants to update product information on product grid with smooth user experience. After analyzing the client requirements, we proposed our client to make an AJAX request on product grid. In this article, we have demonstrated how to enhance magento admin grid user experience using ajax which shall allow Product, Customer, Order updates smoothly.

Step 1: Override Renderer Method or Create New Renderer Method:

Adding update and cancel button in product grid column. For this we need to create render() method at Mage_Adminhtml_Block_Catalog_Product_Renderer_Updateinfo. If Renderer folder is not available in product catalog then create it manually and add the below code in Updateinfo.php file:

class Mage_Adminhtml_Block_Catalog_Product_Renderer_Updateinfo extends Mage_Adminhtml_Block_Widget_Grid_Column_Renderer_Abstract
{
   /* Render Grid Column*/
   public function render(Varien_Object $row) 
   {
	$collection = Mage::getModel('catalog/product')->getCollection()->addFieldToFilter('entity_id', $row->getId());
	foreach ($collection as $item){
	   return sprintf('<a onClick="updateStatus(%s,%s);">%s</a><a style="margin-left:10px;" onClick="updateStatus(%s,%s);">Cancel</a>',
	  $row->getId(),
	  1,
	  'Update',
	  $row->getId(),
	  0,
	  'Cancel');
       }  
		
   }
}

Step 2 : Add new column in Grid.php:

Go on the Mage > Adminhtml > Block > Catalog >Product >Grid.php and Add the below code in the _prepareColumns() method.

$this->addColumn('update', array('header' => Mage::helper('catalog')->__('Update Info'),
   'align' => 'left',
   'index' => 'update',
   'renderer' => 'Mage_Adminhtml_Block_Catalog_Product_Renderer_Updateinfo', ));

After add the new the column the product grid looks

Step 3 : Add Ajax request function:

Add updateStatus() function in our custom js file and add custom js file in the magento header.

function updateStatus(auction_id,active)
{
   new Ajax.Request('/Mage_Adminhtml_Catalog_ProductController/update', 
   {
	method: 'post',parameters: { id: auction_id,active: active},
	onSuccess: function(){
	  window.location.reload();
	}
				
    });
}

Step 4 : Add update method in Product Controller :

Go on the Mage > Adminhtml >Catalog > ProductController and add the update() method.

public function updateAction() {
   $id = $this->getRequest()->getParam('id');
   $active = $this->getRequest()->getParam('active');
   $collection = Mage::getModel('catalog/product')->getCollection()
   ->addFieldToFilter('entity_id', $id);
   foreach ($collection as $item){
       if($active){
    	 $status = 5;
       }
       else{
    	 $status = 4;
       }
    $item->setStatus($status);
    $item->save();
  }
}

This method will update the current status of product.

Conclusion

Hence, using this we can make an ajax call on any admin grid like Product, Customer, Order, Inventory, Category and update the entity information without reload the page. Feel free to contact us if you have any further query.

Enhance magento admin grid user experience using ajax

Step 1: Override Renderer Method or Create New Renderer Method:

Step 2 : Add new column in Grid.php:

Step 3 : Add Ajax request function:

Step 4 : Add update method in Product Controller :

Conclusion

References