ArtiGrid
v2.0

Add Related Records via Modal (dynamicSelect)

This demo shows how ArtiGrid handles foreign key relationships using the dynamicSelect() method. The officeCode field in the employees table is displayed as a dropdown select, but with a twist: you can instantly add a new office record directly from the same interface without leaving the page. The modal form appears with the fields you define (officeCode, city, country), and once saved, the new office becomes available in the select dropdown – all via AJAX. This pattern is perfect for managing lookup tables and maintaining data integrity while keeping the user experience smooth and uninterrupted. 


<?php
$grid = new ArtiGrid();
$grid->table('employees')
    ->dynamicSelect('officeCode', [
        'table' => 'offices',
        'valueField' => 'officeCode',
        'labelField' => 'city',
        'modalTitle' => 'Add new office',
        'modalFields' => [
            ['name' => 'officeCode', 'label' => 'Código', 'type' => 'text'],
            ['name' => 'city', 'label' => 'Ciudad', 'type' => 'text'],
            ['name' => 'country', 'label' => 'País', 'type' => 'text'],
        ],
        'lang' => [
            'save'   => 'Guardar',
            'cancel' => 'Cancelar'
        ],
        'required' => false,
        'requiredFields' => ['officeCode', 'city'],
        'buttonLabel' => '<i class="fa fa-plus-circle"></i>',
        'buttonClass' => 'btn btn-sm btn-outline-primary',
    ]);
    $grid->chosen('officeCode', [
        'placeholder_text_single' => 'Elige una categoría',
        'allow_single_deselect'   => true,
    ]);
echo $grid->render('insert');
?>