We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

BUGS: Syncfusion grid column filters don't reopen

Thread ID:

Created:

Updated:

Platform:

Replies:

123625 Apr 5,2016 10:51 AM UTC Apr 7,2016 07:23 AM UTC JavaScript 3
loading
Tags: ejGrid
ov
Asked On April 5, 2016 10:51 AM UTC


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>



Venkatesh Ayothi Raman [Syncfusion]
Replied On 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
Replied On 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?

Venkatesh Ayothi Raman [Syncfusion]
Replied On 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.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;