<link rel="STYLESHEET" type="text/css" href="../../..//dhtmlxCombo/codebase/dhtmlxcombo.css">
<script  src="../../..//dhtmlxCombo/codebase/dhtmlxcommon.js"></script>
<script  src="../../..//dhtmlxCombo/codebase/dhtmlxcombo.js"></script>
<link rel="STYLESHEET" type="text/css" href="../../../dhtmlxGrid/codebase/dhtmlxgrid.css">
<link rel="stylesheet" type="text/css" href="../../../dhtmlxGrid/codebase/skins/dhtmlxgrid_dhx_skyblue.css">
<script  src="../../../dhtmlxGrid/codebase/dhtmlxcommon.js"></script>
<script  src="../../../dhtmlxGrid/codebase/dhtmlxgrid.js"></script>
<script  src="../../../dhtmlxGrid/codebase/ext/dhtmlxgrid_filter.js"></script>
<script  src="../../../dhtmlxGrid/codebase/dhtmlxgridcell.js"></script>        
<script type="text/javascript" src="../../codebase/datastore.js"></script>     
 
 
<div id="combo_here1" style="width:600px; height:270px; background-color:white;"></div>
<div id="gridbox" style="width:600px; height:270px; background-color:white;"></div>
<script>
var list1 = new dhtmlXDataStore({
    url: "../common/data/data.json",
    datatype: "json";
});
list1.data.scheme({
    $init: function(obj) {
        obj.value = obj.id;
        obj.text = obj.Package;
    }
});
dhtmlx.image_path = "../../..//dhtmlxCombo/codebase/imgs/";
combo1 = new dhtmlXCombo("combo_here1", "combo1", "100%");
combo1.sync(list1);
 
mygrid = new dhtmlXGridObject('gridbox');
mygrid.setImagePath("../../..//codebase/imgs/");
mygrid.setSkin("dhx_skyblue");
mygrid.setHeader("Package,Maintainer");
mygrid.setColumnIds("Package,Maintainer");
mygrid.init();
mygrid.sync(list1);
mygrid.bind(combo1, function(data, filter) {
    return mygrid.cells(data, 0).getValue() == filter.text;
});</script>