We can reproduce the filtering issues with the filter panel not reopening after selection.
1. Filter on the column ship city, Select one
2. Try re-filtering on the ship city column, You can see that the filter panel closes itself
Can you please paste the code below to reproduce in the syncfusion playground.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Essential Studio for JavaScript : Filtering Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<link rel='nofollow' href="13.4.0.53/external/bootstrap.css" rel="stylesheet" />
<link rel='nofollow' href="http://cdn.syncfusion.com/13.4.0.53/js/web/flat-azure/ej.web.all.min.css" rel="stylesheet" />
<link rel='nofollow' href="13.4.0.53/themes/web/default.css" rel="stylesheet" />
<link rel='nofollow' href="13.4.0.53/themes/web/default-responsive.css" rel="stylesheet" />
<link rel='nofollow' href="http://cdn.syncfusion.com/13.4.0.53/js/web/responsive-css/ej.responsive.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-1.10.2.min.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-2.1.4.min.js"></script>
<!--<![endif]-->
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
<script src="13.4.0.53/scripts/web/jsondata.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
<script src="https://demo.definitiv.com.au/build/js/thirdparty.min.js?~v=qo9d_TeDAojeBCEfsIP5SBc_X8uQg1EEY0pksIA9n_g1"></script>
<style type="text/css">
.e-grid .e-excelfilter .e-btncontainer input{
padding: .2em .4em .3em;
}
.e-grid.e-dlgcontainer .e-dlgBtns .e-clear {
padding: 3px;
}
.e-grid.e-dlgcontainer .e-dlgBtns .e-filter {
padding: 3px;
}
::-ms-clear {
display: none;
}
</style>
</head>
<body>
<div class="content-container-fluid">
<div class="row">
<div class="cols-sample-area">
<div id="Grid"></div>
</div>
<div id="sampleProperties">
<div class="prop-grid">
<div class="row">
<div class="col-md-3">
Filter Menu Type
</div>
<div class="col-md-3">
<select id="filtermenu" class="e-ddl" data-bind="value: field">
<option value="excel" selected="selected">Excel</option>
<option value="menu">Menu</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$("#Grid").ejGrid({
// the datasource "window.gridData" is referred from jsondata.min.js
dataSource: window.gridData,
allowPaging: true,
allowFiltering: true,
enableHeaderHover: true,
filterSettings: { filterType: "excel" },
columns: [
{ field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 75 },
{ field: "CustomerID", headerText: "Customer ID", width: 90 },
{ field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 90 },
{ field: "Freight", headerText: "Freight", textAlign: ej.TextAlign.Right,format: "{0:C2}", width: 80 },
{ field: "ShipCity", headerText: "Ship City", width: 90 },
{ field: "Verified", headerText: "Verified", width: 90 }
]
});
$("#filtermenu").ejDropDownList({ "change": "selectChange", width: "120px", selectedItemIndex: 0 })
//$("#sampleProperties").ejPropertiesPanel();
});
function selectChange(args) {
$("#Grid").ejGrid("option", { "filterSettings": { "filterType": this.getSelectedValue() } });
}
</script>
</body>
</html>
