Filter dropdown goes beyond the filter popup in jqxgrid - jqxgrid

Question

I am using jqxgrid widget, which is a jquery grid widget.
I am finding that the filter conditions dropdown is extending beyond the filter popup and this is causing the filter popup to automatically close if I click the last item in the filter conditions dropdown. So its impossible to filter when using the last item in conditions dropdown. You can see this in screen shot attached. I cannot filter on null or not null conditions due to this.
How can I prevent this?
Code for jqxGrid is as below.
$("#jqxgrid").jqxGrid({
theme: 'ui-start',
width: 740,
source: dataAdapter,
pageable: true,
sortable: true,
filterable: true,
autoheight: true,
virtualmode: true,
rendergridrows: function (args) {
return args.data;
},
updatefilterconditions: function (type, defaultconditions) {
var stringcomparisonoperators = ['EMPTY', 'NOT_EMPTY', 'CONTAINS',
'DOES_NOT_CONTAIN', 'STARTS_WITH',
'ENDS_WITH', 'EQUAL', 'NULL', 'NOT_NULL'];
var numericcomparisonoperators = ['EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'];
var datecomparisonoperators = ['EQUAL', 'NOT_EQUAL', 'LESS_THAN', 'LESS_THAN_OR_EQUAL', 'GREATER_THAN', 'GREATER_THAN_OR_EQUAL', 'NULL', 'NOT_NULL'];
var booleancomparisonoperators = ['EQUAL', 'NOT_EQUAL'];
switch (type) {
case 'stringfilter':
return stringcomparisonoperators;
case 'numericfilter':
return numericcomparisonoperators;
case 'datefilter':
return datecomparisonoperators;
case 'booleanfilter':
return booleancomparisonoperators;
}
},
updatefilterpanel: function (filtertypedropdown1, filtertypedropdown2, filteroperatordropdown, filterinputfield1, filterinputfield2, filterbutton, clearbutton,
columnfilter, filtertype, filterconditions) {
var index1 = 0;
var index2 = 0;
if (columnfilter != null) {
var filter1 = columnfilter.getfilterat(0);
var filter2 = columnfilter.getfilterat(1);
if (filter1) {
index1 = filterconditions.indexOf(filter1.comparisonoperator);
var value1 = filter1.filtervalue;
filterinputfield1.val(value1);
}
if (filter2) {
index2 = filterconditions.indexOf(filter2.comparisonoperator);
var value2 = filter2.filtervalue;
filterinputfield2.val(value2);
}
}
filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index1 });
filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: true, selectedIndex: index2 });
},
columns: [
{ text: 'Sales Order ID', dataField: 'SalesOrderID', width: 120 },
{ text: 'Sales Order Number', dataField: 'SalesOrderNumber', width: 120 },
{ text: 'Purchase Order Number', dataField: 'PurchaseOrderNumber', width: 120 },
{ text: 'Customer ID', dataField: 'CustomerID', width: 120 },
{ text: 'Order Date', dataField: 'OrderDate', width: 130, cellsformat: 'MM-dd-yyyy' },
{ text: 'Due Date', dataField: 'DueDate', width: 130, cellsformat: 'MM-dd-yyyy' }
]
});

Answer 1

It seems that writing down your question in detail can sometimes suddenly provide you with the solution and answer. In my case, it did.
I have set autoDropDownHeight to true in my code, which actually needs to be set to false.
The correct code should have been as below.
filtertypedropdown1.jqxDropDownList({ autoDropDownHeight: false, selectedIndex: index1 });
filtertypedropdown2.jqxDropDownList({ autoDropDownHeight: false, selectedIndex: index2 });