Example: connected-jquery-grids

<!DOCTYPE html>
<html>
<head>
    <title>Connected jQuery Grids</title>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://unpkg.com/gijgo@1.9.14/js/gijgo.min.js" type="text/javascript"></script>
    <link href="https://unpkg.com/gijgo@1.9.14/css/gijgo.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <div class="">
        <table id="grid1" data-primary-key="ID"></table>
        <br /><br />
        <table id="grid2"></table>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            var grid1, grid2;
            grid1 = $('#grid1').grid({
                primaryKey: 'ID',
                dataSource: '/Players/Get',
                columns: [{ field: 'ID', width: 56 }, { field: 'Name' }, { field: 'PlaceOfBirth' }],
                pager: { limit: 5 }
            });
            grid2 = $('#grid2').grid({
                primaryKey: 'ID',
                dataSource: '/Players/GetTeams',
                autoLoad: false,
                columns: [
                    { title: 'Years', tmpl: '{FromYear} - {ToYear}', width: 140 },
                    { field: 'Team' },
                    { field: 'Apps', width: 90 },
                    { field: 'Goals', width: 90 }
                ],
                pager: { limit: 5 }
            });
            grid1.on('rowSelect', function (e, $row, id, record) {
                grid2.reload({ playerId: id, page: 1 });
            });
        });
    </script>
</body>
</html>