jqxWidget Grid Filter Menu Not Showing or Input Field Disabled

jqxWidget jqxGrid

by ayrus02

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css">
<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://www.jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://www.jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/globalization/globalize.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/generatedata.js"></script>
<div id="dialogContainer" style="">
	<div id="dlgSelectData" style=""></div>
</div>

<button id="btnShow">
Open Dialog
</button><br /><br />

<div id="mainGrid" style=""></div>

JavaScript

var data = generatedata(325);

var source = {
  localdata: data,
  datafields: [
    {name: 'firstname', type: 'string'},
    {name: 'lastname', type: 'string'},
    {name: 'productname', type: 'string'},
    {name: 'price', type: 'number'},
    {name: 'quantity', type: 'number'},
    {name: 'total', type: 'number'},
  ],
  datatype: "array",
  beforeprocessing: function (data) {
    source.totalrecords = 325;
	},  
};

var adapter = new $.jqx.dataAdapter(source);
var adapter2 = new $.jqx.dataAdapter(source);
$("#mainGrid").jqxGrid({
  width: '100%',
  height: 270,
  source: adapter,
  pagesize: 100,
  pagesizeoptions: [10, 20, 50, 100, 200, 500, 1000],
  filterable: true,
  sortable: true,
  pageable: true,
  showsortcolumnbackground: true,
  showsortmenuitems: true,
  enabletooltips: true,
  columnsresize: true,
  sorttogglestates: 1,
  rendergridrows: function (params) {
    return params.data;
  },
  columns: [
    { text: 'First Name', datafield: 'firstname', width: 150 },
    { text: 'Last Name', datafield: 'lastname', width: 150 },
    { text: 'Product Name', datafield: 'productname', width: 150 },
    { text: 'Price', datafield: 'price', width: 75 },
    { text: 'Qqantity', datafield: 'quantity', width: 75 },
    { text: 'Total', datafield: 'total', width: 75 }
  ]
});


$('#btnShow').on('click', function() {
 
	//$('#dialogContainer').html('<div id="dlgSelectData" style=""></div>');
	$('#dlgSelectData').html('<div id="jqxPopupGrid"></div>');

  $("#jqxPopupGrid").jqxGrid({
		width: '100%',
		height: 270,
    source: adapter2,
    pagesize: 100,
		pagesizeoptions: [10, 20, 50, 100, 200, 500, 1000],
		filterable: true,
		sortable: true,
		pageable: true,
		showsortcolumnbackground: true,
		showsortmenuitems: true,
		enabletooltips: true,
		columnsresize: true,
    sorttogglestates: 1,
		rendergridrows: function (params) {
				return params.data;
		},
    columns: [
			{ text: 'First Name', datafield: 'firstname', width: 150 },
			{ text: 'Last Name',...