In the previous blog we created a very basic admin grid. Here we will modify it little bit.
Class of a Column
In the previous grid we have not shown the content of the blog. That it is because the blog content will be large and it will not be practical to show the whole content. But we can show 20 characters just like we did on front-end.
Let’s see how we can do that. We are adding a new column in the grid, so we need to change the content of ui component file view/adminhtml/ui_component/blogmanager_blog_listing.xml
Please use online diff checker to easily see what’s different from last version of this file. The only thing different here is that we have added a new column tag for content. In that tag we have used class=”Webkul\BlogManager\Ui\Component\Listing\Columns\Content”. By adding the class we are telling magento that we will provide the data for this column with this class. All the ui component related php files are created under Ui/Component folder.
Now let’s create the Content class as Ui/Component/Listing/Columns/Content.php
So what we are doing here is that we are looping through all the rows and updating the content column to show only 20 characters. For updating the data, we are using prepareDataSource method.
We use this technique when we need perform some operations before showing the data or when the data is not coming from our table.
Now if you browse, you will see the content column,
Select Option type Column
We will be implementing a feature in next few blogs with which admin will be able to manage the status of the blog. That’s why we have added the status column, which will be 0 or 1. In the status column we are showing 0 or 1 instead it will be better if we show text labels such as Disabled or Enabled.
So for that as you may have guessed we need to make changes in view/adminhtml/ui_component/blogmanager_blog_listing.xml
Only changes you will find here are in the column tag. We are using select component which will replace the value with the label. We will provide key-value pair with the options class Webkul\BlogManager\Model\Blog\Status.
In earlier section I mentioned that all the php files related to ui component should be in Ui/Component folder but this class is not limited to ui component, we can use it front-end too. So I will create it in model folder (it’s a general convention).
In the filter tag we have mentioned that it is a select type so in filter section you will find multi-select dropdown for this column.
Now let’s see the option class Model/Blog/Status.php
<?php
namespace Webkul\BlogManager\Model\Blog;
use Magento\Framework\Data\OptionSourceInterface;
class Status implements OptionSourceInterface
{
publicfunctiontoOptionArray()
{
$options = [];
$options[] = ['label' =>'Disabled', 'value' =>0];
$options[] = ['label' =>'Enabled', 'value' =>1];
return$options;
}
}
Here we are creating an associative array and returning it in toOptionArray method.
Whenever we have any such column which have options, like Yes/No or Bad/Neutral/Good, etc. we use this technique.
Now if you check the Manage Blog page, you will see the changes,
_renderFiltersBefore
In the grid, we are showing the customer id in the User column which is not very helpful. Instead of the id we should show the customer name. We can do this by creating a class for the column but then we will not able to perform sorting and filtering on that column. This is because the column data get modified later. What I mean by this is that at first the original sql query get executed (in our virtual class) then we loop through the rows that we get as a result of the sql query.
So if we want sorting and filtering to work we need modify the sql, for that we need to create the actual data provider class instead of using the virtual class.
The customer data are stored in “customer_grid_flat” table. We can join our table with the customer table to get the name.
Now let’s see this in code. First we will create the data provider class as Model/ResourceModel/Blog/Grid/Collection.php this is general convention to create the data provider or grid collection of a table alongside the collection class of that table.
You don’t have to worry about all the methods. We have to understand only _renderFiltersBefore and _initSelect methods.
$this->getTable(‘customer_grid_flat’) this will give the table name by adding the table prefix if any.
We already know about the getSelect, $this->getSelect() will give access to the sql query of this class. We are performing left join with joinLeft method. Then we are joining customer_grid_flat table on ‘main_table.user_id = cgf.entity_id’, where cgf is alias for customer_grid_flat. And we are getting the customer name in user_name column.
The actual sql query will look like,
SELECT
`main_table`.*,
`cgf`.`name` AS `user_name`
FROM
`blogmanager_blog` AS `main_table`
LEFT JOIN
`customer_grid_flat` AS `cgf`
ON main_table.user_id = cgf.entity_id
We also need to map this column alias in _initSelect method otherwise filter will not work.
Now we need to modify the etc/di.xml because data provider is not a virtual class anymore,
Here we have changed the tag virtualType to type. And we are providing the arguments as before. If you check the grid class you will find these arguments in the __construct method.
We also need to change the ui component file view/adminhtml/ui_component/blogmanager_blog_listing.xml because the new column name is user_name
