two grids with connected data

I have a page with 2 tab’s. On the first tab I have a list of the suppliers. Every supplier can have one or more contact persons. On the second tab I have the contacts. What I want is that when on the first tab a row of a supplier is selected on the second tab only the contacts of this supplier is shown and editable (change/delete/add). On this moment I have on both grids the complete table. What do I need to do to make this working?

the code:
myTabbar = new dhtmlXTabBar(“my_tabbar”);

        myTabbar.addTab("overview", "Leveranciers", "120px");
        myTabbar.addTab("contacts", "Contact Persoon", "120px");
        myTabbar.setArrowsMode('auto');
        myTabbar.tabs("overview").setActive();

        // grid on tab 1
        myGrid = myTabbar.cells("overview").attachGrid();
        myGrid.setHeader("ID,Nr,Naam,Adres,Postcode,Woonplaats,Land,Telefoon,Email,BTW,KvK");                                       
        myGrid.setColumnIds("LeveranciersId,LeveranciersNr,Naam,Adres,Postcode,Woonplaats,LandId,Telefoon,Email,BTW,KvK");          
        myGrid.setColValidators([null,"NotEmpty",null,null,null,null,null,"CheckPhone","CheckEmail",null,null]);
        myGrid.setInitWidths("50,50,150,150,100,150,100,100,150,80,80");
        myGrid.setColAlign("left,left,left,left,left,left,left,left,left,left,left");
        myGrid.setColTypes("ed,ed,ed,ed,ed,ed,coro,ed,ed,ed,ed,ed");
        myGrid.setColSorting("str,str,str,str,str,str,str,str,str,str,str");
        myGrid.enableAutoHeight(true,780,false)
        myGrid.init();
        myGrid.load("classes/dhtmlx/data/leverancierLoad.php");

        // grid on tab 2
        myGridDetail = myTabbar.cells("contacts").attachGrid();
        myGridDetail.setHeader("Nr,Naam,Telefoon,Email,Standaard,LeveranciersId");
        myGridDetail.setColumnIds("ContactId,Naam,Telefoon,Email,Standaard,LeveranciersId");
        myGridDetail.setColValidators([null,null,"CheckPhone","CheckEmail",null,null]);
        myGridDetail.setInitWidths("50,150,100,150,50,50");
        myGridDetail.setColAlign("left,left,left,left,left,left");
        myGridDetail.setColTypes("ed,ed,ed,ed,ed,ed");
        myGridDetail.setColSorting("str,str,str,str,str,str");
        myGridDetail.enableAutoHeight(true,780,false)
        myGridDetail.init();
        myGridDetail.load("classes/dhtmlx/data/contacts.php");

leverancierLoad.php
$grid = new GridConnector($res,“MySQL”);
$grid->render_table(“tbl_leverancier”,“LeveranciersId”,“LeveranciersId,LeveranciersNr,Naam,Adres,Postcode,Woonplaats,LandId, Telefoon,Email,BTW,KvK”);

contacts.php
$grid = new GridConnector($res,“MySQL”);
$grid->render_table(“tbl_contacts”,“ContactId”,“ContactId,Naam,Telefoon,Email,Standaard,LeveranciersId”);

One more info. The tables are related via the field LeveranciersId.

I found the solution. (again after posting here I find the solution myself, i realy need to post earlier to find the solution quicker :laughing: :smiley: )

the code I added:
myGrid.attachEvent(“onRowSelect”,function(id){
levId = myGrid.cells(id, 0).getValue();
myGridDetail.clearAndLoad(“classes/dhtmlx/data/contacts.php?LevId=”+levId);

        });

and then in the load page contacts.php
function custom_filter($data){
if ($data->get_value(“LeveranciersId”)!=$_GET[‘LevId’])
$data->skip(); //not include into output
}
$grid->event->attach(“beforeRender”,“custom_filter”);