3 (60%) 11 votes

In this topic We will show you how to reload Ui component grid table with js.

  • Step 1: Create UI component grid with xml file.
  • Step 2: Write reload function with js.

Magento 2 provide Ui component to create grid table in admin. It’s make the grid is easy to use and more comfortable for store owner to filter, sort or change position of grid columns.

However, It’s difficult for developers to custom or process something which relate to the grid. Example, if you want to reload an Ui grid table, you cannot use transactionGridJsObject.resetFilter() like a normal block grid in magento 

Step 1: Create UI component grid with xml file

In this example, we use a Ui component grid of Magestore_OrderSuccess module.

File directory: app/code/Magestore/OrderSuccess/view/ui_component/os_needship_listing.xml

Step 2: Write reload function with js.

File directory: app/code/Magestore/OrderSuccess/view/adminhtml/web/js/order/ship_process.js

We can use this function everywhere. Data of Ui component grid is stored in uiRegistry.

We need only set a temp value ( Date.now() ) for any param of the data (t), this grid will be reload. 

The steps I mention above is the shortest process for you to  Reload Ui Component Grid Table with Js.

Thank you for reading this post and see you in other posts from Magestore!

Check here for Magento extensions and Magento 2 extensions now !

Your Magento website needs a powerful Magento ERP for stock control.


magento erp

How to Create Auto Update Time Attributes in InstallSchema of Magento 2
How to Insert JS, CSS or Less with Your Module in Magento 2