How to Add Inline Edit in UI Grid in Magento 2 Backend


The Magento 2 UI grids are used to manage the store data in an easy-to-handle format.

In default Magento 2, the backend grids allow the admin to sort, filter, and edit the data. The admin can also use pagination and mass action to update the data in bulk.

However, there is a drawback in the design of the grids that compels the admin to open each row and update the data in it. It is a tedious and time-consuming task.

The solution to this issue is to add inline edit in UI grid in Magento 2 backend as shown below:

inline edit

After implementing it using the below solution, the admin need not open each entry in the edit mode but simply make the necessary changes using the inline edit as shown in the above image.

You can use this solution in a custom admin grid as well as in Magento 2 default grids.

Steps to Add Inline Edit in UI Grid in Magento 2 Backend

  1. Use the below code in your xml file of ui_component or in the grid where you want to add inline edit.
    This file will be located under  Vendor/Extension/view/adminhtml/ui_component/ .
  2. Create the InlineEdit.php file to get data and save it in the database at Vendor/Extension/Controller/Adminhtml/Action/.

    Do you find it challenging to edit your inline grid? Just mention your difficulty in the Comments section below.

    I would be happy to help.

    Feel free to share the solution with Magento Community via social media.

    Thank You.

Get Weekly Updates

Never miss Magento tips, tricks, tutorials, and news.

Thank you for subscribing.

Something went wrong.

(based on 11 Reviews)

Dipak is a Magento Developer at Meetanshi. Apart from work, he loves playing cricket with his friends. Traveling and exploring new places is something that he is passionate about.

Leave a reply:

Your email address will not be published.