JGXGRID not filterable in JQXWINDOW

by mogador

HTML

<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="http://jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>
<script src="https://jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id="jqxWindow" class="hidden">
  <div id="windowHeader">
    <label>Title</label>
  </div>
  <div id="windowContent">
    <div id='jqxgrid1'></div>
  </div>
</div>



<p>
the grid on main window is filterable.

Click on Open window, the same grid appears in jqxwindow, but You can't open the filter menu
</p>
<button id="bt_open">Open Window</button>
<p>

</p>
<div id='jqxgrid2'></div>

CSS

.jqx-menu-wrapper{
	z-index:1850!important;
}
.jqx-listbox-container {
	z-index:1875!important;
}

JavaScript

$("#bt_open").click(function() {
  $("#jqxWindow").removeClass("hidden");
  $("#jqxWindow").jqxWindow('open');
});

$('#jqxWindow').jqxWindow({
  autoOpen: false,
  height: 500,
  width: 600,
  isModal: true,
  closeButtonSize: 32
});

var data = generatedata(500);
var source = {
  localdata: data,
  datafields: [{
    name: 'firstname',
    type: 'string'
  }, {
    name: 'lastname',
    type: 'string'
  }],
  datatype: "array"
};

var adapter = new $.jqx.dataAdapter(source);
$("#jqxgrid1").jqxGrid({
  width: 500,
  height: 200,
  filterable: true,
  source: adapter,
  columns: [{
    text: 'First Name',
    datafield: 'firstname',
    width: 150
  }, {
    text: 'Last Name',
    datafield: 'lastname',
    width: 150
  }]
});

$("#jqxgrid2").jqxGrid({
  width: 500,
  height: 200,
  filterable: true,
  source: adapter,
  columns: [{
    text: 'First Name',
    datafield: 'firstname',
    width: 150
  }, {
    text: 'Last Name',
    datafield: 'lastname',
    width: 150
  }]
});