Display title in admin grid

Question

I have created a table

   $table = $installer->getConnection()->newTable(
        $installer->getTable('blog_comment')
         )
            ->addColumn(
        'comment_id',
        \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
        null,
        ['identity' => true, 'nullable' => false, 'primary' => true],
        'Comment ID'
    )->addColumn(
        'parent_id',
        \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
        null,
        ['nullable' => false],
        'Parent Comment ID'
    )->addColumn(
        'post_id',
        \Magento\Framework\DB\Ddl\Table::TYPE_INTEGER,
        null,
        ['nullable' => false],
        'Post ID'
    )->addForeignKey(
        $installer->getFkName('blog_comment', 'post_id', 'blog_post', 'post_id'),
        'post_id',
        $installer->getTable('blog_post'),
        'post_id',
        \Magento\Framework\DB\Ddl\Table::ACTION_CASCADE
    );
        $installer->getConnection()->createTable($table);
    }

I have created an admin grid for this table and save corresponding values.

<column name="post_id">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="editor" xsi:type="array">
                        <item name="editorType" xsi:type="string">text</item>
                    </item>
                    <item name="label" xsi:type="string" translate="true">Post</item>
                </item>
            </argument>
        </column>

In post column in this grid displayed like post_id....But i need to display the corresponding title of this post...

DataProvider.php

$items = $this->collection->getItems();
        foreach ($items as $comment) {
            $comment = $comment->load($comment->getId());
            $this->_loadedData[$comment->getId()] = $comment->getData();//echo "<pre>";print_r($this->_loadedData[$category->getId()]);exit;


            $post = $comment->getPost();
            $url['post_url'] = [
                'url' => $this->url->getUrl('blog/post/edit', ['id' => $post->getId()]),
                'title' => $post->getTitle(),
                'text' => '#' . $post->getId() . '. ' . $post->getTitle(),
            ];



            $author = $comment->getAuthor();
            switch ($comment->getAuthorType()) {
                case \XXX\Blog\Model\Config\Source\AuthorType::GUEST:
                    $url['author_url'] = [
                        'url' => 'mailto:' . $author->getEmail(),
                        'title' => $author->getNickname(),
                        'text' => $author->getNickname() . ' - ' . $author->getEmail() . ' (' . __('Guest')  . ')',
                    ];
                    break;
                case \XXX\Blog\Model\Config\Source\AuthorType::CUSTOMER:
                    $url['author_url'] = [
                        'url' => $this->url->getUrl('customer/index/edit', ['id' => $comment->getCustomerId()]),
                        'title' => $author->getNickname(),
                        'text' => '#' . $comment->getCustomerId() . '. ' . $author->getNickname() . ' (' . __('Customer')  . ')',
                    ];
                    break;
                case \XXX\Blog\Model\Config\Source\AuthorType::ADMIN:
                    $url['author_url'] = [
                        'url' => $this->url->getUrl('adminhtml/user/edit', ['user_id' => $comment->getAdminId()]),
                        'title' => $author->getNickname(),
                        'text' => '#' . $comment->getAdminId() . '. ' . $author->getNickname() . ' (' . __('Admin')  . ')',
                    ];
                    break;
            }


            if ($comment->getParentId()
                && ($parentComment = $comment->getParentComment())
            ) {
                $text = (mb_strlen($parentComment->getText()) > 200) ? (mb_substr($parentComment->getText(), 0, 200) . '...') : $parentComment->getText();
                $text = htmlspecialchars($text);
                $url['parent_url'] = [
                    'url' => $this->url->getUrl('blog/comment/edit', ['id' => $parentComment->getId()]),
                    'title' => htmlspecialchars($parentComment->getText()),
                    'text' => '#' . $parentComment->getId() . '. ' . $text,
                ];
            } else {
               $url['parent_url'] = [
                    'url' => '',
                    'title' => '',
                    'text' => '',
                ];
            }

        }
        $this->_loadedData[$comment->getId()] = array_merge($this->_loadedData[$comment->getId()], $url);
        //echo "<pre>";print_r($this->_loadedData[$comment->getId()]);exit;
        return $this->_loadedData;

Comment_form.xml

<fieldset name="general" sortOrder="10">
        <settings>
            <collapsible>false</collapsible>
            <label translate="true"/>
        </settings>
        <field name="post_url" sortOrder="10" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">blog_comment</item>
                    <item name="component" xsi:type="string">XXX_Blog/js/form/element/link</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">false</rule>
                </validation>
                <dataType>text</dataType>
                <label translate="true">Post</label>
                <visible>true</visible>
                <dataScope>post_url</dataScope>
            </settings>
        </field>
        <field name="author_url" sortOrder="20" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">blog_comment</item>
                    <item name="component" xsi:type="string">XXX_Blog/js/form/element/link</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">false</rule>
                </validation>
                <dataType>text</dataType>
                <label translate="true">Author</label>
                <visible>true</visible>
                <dataScope>author_url</dataScope>
            </settings>
        </field>
        <field name="parent_url" sortOrder="30" formElement="input">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">blog_comment</item>
                    <item name="component" xsi:type="string">XXX_Blog/js/form/element/link</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">false</rule>
                </validation>
                <dataType>text</dataType>
                <label translate="true">Parent Comment</label>
                <visible>true</visible>
                <dataScope>parent_url</dataScope>
            </settings>
        </field>
        <field name="status" sortOrder="40" formElement="select">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">blog_comment</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">false</rule>
                </validation>
                <dataType>text</dataType>
                <label translate="true">Status</label>
                <visible>true</visible>
                <dataScope>status</dataScope>
            </settings>
            <formElements>
                <select>
                    <settings>
                        <options class="XXX\Blog\Model\Config\Source\CommentStatus"/>
                    </settings>
                </select>
            </formElements>
        </field>
        <field name="creation_time" sortOrder="50" formElement="date">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">blog_comment</item>
                    <item name="options" xsi:type="array">
                        <!--<item name="dateFormat" xsi:type="string">yyyy-MM-dd</item>
                        <item name="timeFormat" xsi:type="string">HH:mm:ss</item>-->
                        <item name="showsTime" xsi:type="boolean">true</item>
                    </item>
                </item>
            </argument>
            <settings>
                <dataType>datetime</dataType>
                <label translate="true">Publish Date</label>
                <dataScope>creation_time</dataScope>
            </settings>
        </field>

        <field name="text" sortOrder="60" formElement="textarea">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">xxx_blog</item>
                </item>
            </argument>
            <settings>
                <validation>
                    <rule name="required-entry" xsi:type="boolean">true</rule>
                </validation>
                <label translate="true">Text</label>
                <visible>true</visible>
                <dataScope>text</dataScope>
            </settings>
        </field>
    </fieldset>

Expected:

Actual Output:

How to do this ..

Thanks.

Answer 1

Below approach may help you:

<column name="post_id" class="[Vendor]\[Module]\Ui\Component\Listing\Column\PostTitle">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="filter" xsi:type="string">text</item>
            <item name="editor" xsi:type="array">
                <item name="editorType" xsi:type="string">text</item>
            </item>
            <item name="label" xsi:type="string" translate="true">Post</item>
        </item>
    </argument>
</column>

<?php
namespace Vendor\Module\Ui\Component\Listing\Column;

use \Magento\Framework\View\Element\UiComponent\ContextInterface;
use \Magento\Framework\View\Element\UiComponentFactory;
use \Magento\Ui\Component\Listing\Columns\Column;
use \Magento\Framework\Api\SearchCriteriaBuilder;

class PostTitle extends Column
{
    protected $_orderRepository;
    protected $_searchCriteria;

    public function __construct(ContextInterface $context, UiComponentFactory $uiComponentFactory, SearchCriteriaBuilder $criteria, array $components = [], array $data = [])
    {
        //Inject Post model
        $this->_searchCriteria  = $criteria;
        parent::__construct($context, $uiComponentFactory, $components, $data);
    }

    public function prepareDataSource(array $dataSource)
    {
        if (isset($dataSource['data']['items'])) {
            foreach ($dataSource['data']['items'] as & $item) {
                $post_comment_id  = $item["comment_id"];

                //Load Comment model with this comment id and get the post_id

                //Load Post model by post_id and get Title and store it in $title

                $item[$this->getData('name')] = $title;
            }
        }

        return $dataSource;
    }
}

Answer 2

<column name="post_id">
  <settings>
    <filter>text</filter>
    <editor>
        <validation>
            <rule name="required-entry" xsi:type="string">true</rule>
        </validation>
        <editorType>text</editorType>
    </editor>
    <label translate="true">Post</label>
  </settings>
</column>

Answer 3

In collection File:

protected function _initSelect()
    {
        parent::_initSelect();
        $this->getSelect()
            ->joinLeft(
                ['post' => $this->getTable('blog_post')],
                'main_table.post_id = post.post_id',
                ['title' => 'title']
            );

        return $this;
    }

ui_component:

<column name="title">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="filter" xsi:type="string">text</item>
                    <item name="editor" xsi:type="array">
                        <item name="editorType" xsi:type="string">text</item>
                    </item>
                    <item name="label" xsi:type="string" translate="true">Post</item>
                </item>
            </argument>
        </column>