JqGrid - populate subgrid only when 2 data lists match

Question

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

score 0 · Accepted Answer · answered Apr 19 '23 at 20:30

0

То 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;
}

answered Apr 19 '23 at 20:30

Tony Tomov

3,122
1
11
18

Thank you Tony, it's close to what i want except that the datas in the subgrid are not filtered. It copies all the whole "subavailable_lessons_json " content each time. I would like to copy ONLY the matching datas in the subgrid – Nico44044 Apr 20 '23 at 06:18
Not sure that I understand what you mean. Who copies all the whole "all the whole "subavailable_lessons_json " content each time". Sorry, but it is difficult for me to understand. – Tony Tomov Apr 20 '23 at 15:07
I figured out that I have in fact 2 problems, your code fixed the first one (to prevent subgrid if no match found) but I still can't filter the data to populate the subgrid. I've created a new subject regarding this one : https://stackoverflow.com/questions/76063801/jqgrid-populate-main-grid-and-subgrid-with-2-different-json-response-with-local – Nico44044 Apr 20 '23 at 15:31

JqGrid - populate subgrid only when 2 data lists match

1 Answers1