how to Add edit and delete button in popup box?

[jesnagifto]

• Laravel Version: #.#.#
• PHP Version:
• Laravel-admin: #.#.#

Description:

$grid->column('user_id', __('Details'))->modal('operations', function ($model) { $comments = $model->Operations()->take(10)->get()->map(function ($comment) { return $comment->only(['id', 'fishname', 'location', 'image']); });

return new Table(['ID', 'Fishname', 'Location', 'Image'], $comments->toArray());

});

Steps To Reproduce:

[jesnagifto]

please help urgently..

[hasy2415]

please help urgently..

is it yet pending?

[jesnagifto]

yes

[alexoleynik0]

Ok, so I've managed to accomplish this using \Encore\Admin\Grid\Displayers\Actions instance. As \Encore\Admin\Widgets\Table renders anything from the $rows array, there can be custom HTML as well. Here's how it looks (in my UserController.php, User hasMany Order):

$grid->column('fake_orders', __('Orders'))->modal(__('Orders'), function ($model) {
    $headers = ['Id', 'Active', 'Actions'];
    $rows = Order::query()->select(['id', 'active'])->where('user_id', $model->id)->get();

    $rows = $rows->map(function ($item) {
        $actions = new \Encore\Admin\Grid\Displayers\Actions(null, new Grid(new Order()), new Grid\Column('foo', 'bar'), $item);
        $actions->setResource(route(admin_get_route('orders.index')));

        return $item->only(['id', 'active']) + [
            'Actions' => '<div style="display: flex; gap: 1rem;">' . $actions->display() . '</div>',
        ];
    })->toArray();

    return new \Encore\Admin\Widgets\Table($headers, $rows);
});

Important here is to pass $item as last argument to Actions's constructor and to setResource to the URL (path) of Order (listed model) admin route (you can pass it as string like "/admin/orders" if you prefer).

But there's new issue happens when clicking on View/Edit link in Table -- LA does not closes jQuery modal properly and the overlay stays.

You can fix this by adding this code to your controller's grid method (or to app/Admin/bootstrap.php if you want to fix it globally):

\Encore\Admin\Admin::script(<<<JAVASCRIPT
    $(document).on('pjax:complete', function () {
        $('body').removeClass('modal-open');
        $('.modal-backdrop').remove();
    });
JAVASCRIPT);

It removes modal-related elements and classes from the DOM after pjax finishes page load.

[alexoleynik0]

For a long time I tried to do it using new \Encore\Admin\Grid instance, but it failed when the $grid->model()->where('user_id', $model->id); were called. Here you can see how it looks, maybe someone manages to fix it:

$grid->column('orders', __('Orders'))->modal(__('Orders'), function ($model) {
    $modalGrid = new \Encore\Admin\Grid(new Order());

    $modalGrid->model()->where('user_id', $model->id); // without this line it works, but renders all Orders..

    // disable everything we don't need
    $modalGrid
        ->disableBatchActions()
        ->disableExport()
        ->disableColumnSelector()
        ->disableCreateButton()
        ->disablePerPageSelector()
        ->disableFilter()
        ->disableTools()
        ->disableRowSelector()
        ->disablePagination()
        ->disableDefineEmptyPage()
        ->setResource(route(admin_get_route('orders.index'))) // this is important
    ;

    $modalGrid->column('id', __('Id'));
    $modalGrid->column('active', __('active'));

    return $modalGrid->render();
});

[technilogics]

@alexoleynik0 thank you for sharing, i tried to fix grid method but not succeeded, it also disturb some of columns in main grid, when i dd($this) in another column display closure, i found that it replaced the main grid.

so i decided to implement the 2nd method.

\Encore\Admin\Grid\Displayers\Actions method works but Delete action is not working, Edit and View Actions direct to another controller. my main requirement was to delete a record from popup.

Now thinking to write some custom javascript functions to delete and edit.