1. Home
  2. Forum
  3. jQuery
  4. BUGS: Syncfusion grid column filters don't reopen

BUGS: Syncfusion grid column filters don't reopen


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.

<!DOCTYPE html>
<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>



3 Replies
VA Venkatesh Ayothi Raman Syncfusion Team April 6, 2016 01:14 PM UTC

Hi Ov,

Thanks for  contacting Syncfusion support.

We have analyzed your code example and found that you are referred third party jquery file. If you wants to refer that jquery file, then we suggest you to remove the Jquery-2.1.4.min.js. Please refer to the sample and code example,
Code example:

<References>


<!--<script src="../scripts/jquery-2.1.4.min.js"></script>-->

    <!--<![endif]-->

    <script src="https://demo.definitiv.com.au/build/js/thirdparty.min.js?~v=qo9d_TeDAojeBCEfsIP5SBc_X8uQg1EEY0pksIA9n_g1"></script>

    <script src="../scripts/jquery.easing.1.3.min.js"></script>

    <script src="../scripts/jsondata.min.js"></script>

    <script src="../scripts/jsrender.min.js"></script>

    <script src="../scripts/jquery.globalize.min.js"></script>

    <script src="../scripts/ej.web.all-53.js"></script>



Sample: http://jsplayground.syncfusion.com/hxyu2afn


Regards,
Venkatesh Ayothiraman.

OV ov April 6, 2016 02:19 PM UTC

The thirdparty scripts is a minified version of the ejgrid javascript along with other javascript controls and our main application javascript files.

it would be nice to know why it doesn't work when integrated with our application.

Are you able to work out why it is happening?

VA Venkatesh Ayothi Raman Syncfusion Team April 7, 2016 07:23 AM UTC

Hi Ov,

Sorry for the inconvenience caused.

We are able to reproduce the issue “Excel filter popup is not opening when ej.touch.min.js is not included” and we have already fixed this in our latest version Essential Studio Volume 1, 2016 (v14.1.0.41). And hence we suggest you to upgrade to our latest version which can be downloaded from the below location.
https://www.syncfusion.com/forums/123633/essential-studio-2016-volume-1-release-v14-1-0-41-is-available-for-download
If you don’t want to upgrade then to resolve this issue, please include the ej.touch.min.js in the thirdparty.min.js file.

Code Example:

<head>

    <title>Essential Studio for JavaScript : Column Reorder</title>

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <meta charset="utf-8" />


    <link rel='nofollow' href="../themes/default-theme/ej.widgets.all.min.css" rel="stylesheet" />

    <link rel='nofollow' href="../themes/default.css" rel="stylesheet" />

    <link rel='nofollow' href="../themes/default-responsive.css" rel="stylesheet" />

    <link rel='nofollow' href="../themes/responsive-css/ej.responsive.css" rel="stylesheet" />

   

    <script src="https://demo.definitiv.com.au/build/js/thirdparty.min.js?~v=qo9d_TeDAojeBCEfsIP5SBc_X8uQg1EEY0pksIA9n_g1"></script>   

    <script src="../scripts/ej.touch.min.js"></script>

    <script src="../scripts/jsondata.min.js"></script>

</head>

 



Regards,
Venkatesh Ayothiraman.

Loader.
Up arrow icon