Exploring Magento 2.2 UI Component – Part 4

Exploring Magento 2.2 UI Component – Part 4 Creating the Grid UI Component

In our Last Tutorial Exploring Magento 2.2 UI Component – Part 3 we have created a new Top Level Admin menu called “Upcoming Shows” and created a custom template output.

In this Tutorial we will Work on the Actual Grid UI Component by creating UI Component XML and including it in adminhtml layout

Step 1:- For this usecase i have defined the UI Component name as “tradeshows_grid.xml”. Since we are going to build the Grid UI Component we need to include the “listing” tag as a top level tag. Listing is a basic component responsible for rendering grids, lists and tiles, providing filtering, pagination, sorting and other features.


The above code snippet defines one main component(listing component) and includes serveral child components like datasource, dataprovider,columns etc.

In the Columns Component we can specify the list of fields to be displayed as Grid Columns. The Column “name” attribute is mapped with the database table column name. The settings tag is where we can define the filter and Grid Column label for a field.

In the actions column we need to specify the class that is responsible for rendering the Edit link, here entity_id is passed as parameter.

Step 2:- The Datasource provides the actual data to be displayed in the Grid component using the collectionFactory.


Step 3:- In the Grid Column the Edit action link should be created using the below class.


Step 4:- We Now modify the “Index” Controller execute Method. Now the “Upcoming Shows” menu will be highlighted whenever it is clicked.

Step 5:- Once the UI Component and all the necessary classes are created, the UI Component XML file i.e tradeshows_grid needs to be included in the adminhtml layout xml file as shown below.


Tradeshows UI Grid