JqGrid - populate subgrid only when 2 data lists match

I have those 2 Json data lists to populate JqGrid and subgrid :

This one for the main grid :

    {'id': 1, 'first_name': 'Greg', 'last_name': 'JEAN'}, 
    {'id': 2, 'first_name': 'Paul', 'last_name': 'Martin'},
    {'id': 3, 'first_name': 'Georges', 'last_name': 'Linc'},
    {'id': 4, 'first_name': 'Bill', 'last_name': 'Evans'}

And this one for the subgrid :

{'idref': 1, 'flavour': 'chocolate', 'temp': 'true'},
{'idref': 2, 'flavour': 'vanilla', 'temp': 'false'},
{'idref': 2, 'flavour': 'peanut', 'temp': 'false',
{'idref': 4, 'flavour': 'mint', 'temp': 'false'}

What i'm trying to do is, IF there is a match between ID and IDREF, populate the subgrid only with the matching datas. If there is no match I don't want any subgrid to appear (like in ID 3 in my example)

The expected result would be like :

I know i could use isHasSubGrid but i don"t know how to write the "matching" condition between the 2 data lists.

This is how my code look like so far :

var available_lessons_json = {{available_lessons|safe}}
     var subavailable_lessons_json = {{subavailable_lessons|safe}}

       $("#jqGrid").jqGrid({

         datatype: 'local',
         data: available_lessons_json,
         colModel: [
            {name: 'id', label : 'id'},
            {name: 'first_name', label : 'first_name'},
             {name: 'last_name', label : 'last_name'}
            
         ],
                loadonce: true,
                viewrecords: true,
                width: 780,
                height: 200,
                rowNum: 20,
                rowList : [20,30,50],
                altRows: true,
                rownumbers: true,
                rownumWidth: 25,

                subGrid: true, 
                subGridRowExpanded: showChildGrid, 
                subGridOptions : {
                    // configure the icons from theme rolloer
                    plusicon: "ui-icon-triangle-1-e",
                    minusicon: "ui-icon-triangle-1-s",
                    openicon: "ui-icon-arrowreturn-1-e"
                },
                pager: "#jqGridPager"

        });

       
        function showChildGrid(parentRowID, parentRowKey) {
            var childGridID = parentRowID + "_table";
            var childGridPagerID = parentRowID + "_pager";

            var childGridURL = parentRowKey+".json";
            

            $('#' + parentRowID).append('<table id=' + childGridID + '></table><div id=' + childGridPagerID + ' class=scroll></div>');

            $("#" + childGridID).jqGrid({
                url: childGridURL,
                datatype: 'local',
                data: subavailable_lessons_json,
                page: 1,
                colModel: [
            {name: 'idref', label : 'idref'},
            {name: 'flavour', label : 'flavour'},
             {name: 'temp', label : 'temp'}
         ],
                loadonce: true,
                width: 500,
                height: '100%',
                pager: "#" + childGridPagerID,


            });

        }

Any help would be welcome.

Thanks in advance

То isHasSubGrid event is passed the id of the main row and if this event return true, the subgrid is build and if it return false it is not build (bind). This event is executed on every row of the main grid.

Maybe this is a one possible solution

isHasSubGrid : function( id ) {
    var ret = false;
    for(var i = 0; i < subavailable_lessons_json.length; i++)
    {
        if(subavailable_lessons_json[i].idref == id) {
            ret = true;
            break;
        }
    }
    return ret;
}