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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback
Essential JS2

Syncfusion jQuery based widgets are no longer in active development. Switch to our pure JavaScript based next generation Essential JS 2 library.

can't see the whole popup of the filter

Thread ID:

Created:

Updated:

Platform:

Replies:

144588 May 13,2019 04:08 PM UTC May 14,2019 09:08 AM UTC jQuery 1
loading
Tags: ejGrid
Luis Carlos
Asked On May 13, 2019 04:08 PM UTC

Good evening.

I can't see the whole popup of the filter because the grid is over a dialog with z-index 9999 (see image). Could you give me any idea about how to fix this problem? Maybe the popup can show at the top of the filter icon?



I will be waiting for your reply, thank you in advance.
Regards, Luis Carlos.

Vignesh Natarajan [Syncfusion]
Replied On May 14, 2019 09:08 AM UTC

Hi Luis, 
 
Thanks for contacting Syncfusion Support. 
 
Query#:- I can't see the whole popup of the filter because the grid is over a dialog with z-index 9999 (see image). Could you give me any idea about how to fix this problem?  
 
From your query, we understand that you are facing issue while opening the excel filter in Grid when placed above the dialog. We are able to reproduce the reported issue at our end. To overcome the reported issue, kindly use any one of the below methods.  
 
Solution#1:-  We suggest you to modify the z-index value of the Grid excelFilter in the actionBegin event. so that it does not hide inside the dialog. Please refer to the code example 
 
<script type="text/javascript"> 
        $(function () { 
            $("#Grid").ejGrid({ 
                // the datasource "window.gridData" is referred from jsondata.min.js 
                dataSource: window.gridData.slice(0,7), 
                allowPaging: true, 
                allowFiltering: true, 
                enableHeaderHover: true, 
                 actionBegin: "begin", 
                filterSettings: { filterType: "excel" }, 
                columns: [ 
                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 75 }, 
                        .   .    . 
               ], 
                actionBegin:function(args){ 
                   if(args.requestType=="filterbeforeopen"){ 
                          var proxy =this; 
                        setTimeout(function(){ 
                            $("#" + proxy._id + args.columnType + "_excelDlg").css("z-index",11111) 
                         },0)                              
                        } 
                  } 
            })        
                       
  
        }); 
        
               
    </script> 
 
Refer the below screenshot for the output 
 
 
 
For your convenience we have prepared a sample which can be referred below  
 
 
Solution#2: Or you can also change the position of excel filter as you suggested. We can change the filter Dialog position by using actionComplete event of the Grid, when requestType as filterafteropen we have defined the style top for the excelFilter dialog. 
 
Refer to the code example:- 
 
<script type="text/javascript"> 
        $(function () { 
            $("#Grid").ejGrid({ 
                // the datasource "window.gridData" is referred from jsondata.min.js 
                dataSource: window.gridData.slice(0,7), 
                filterSettings: { filterType: "excel" }, 
                columns: [ 
                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, width: 75 }, 
                  ], 
                             actionComplete: function(args){   
                                 if(args.requestType=="filterafteropen"){ 
                                        $("#" + this._id + args.columnType + "_excelDlg").css('top', "-100px"); 
                             } 
                }, 
        })    
 
 
Refer the below screenshot for the output 
 
 
 
Refer our API documentation for your reference 
 
 
 
Please get back to us if you need any further assistance. 
 
Regards, 
Vignesh Natarajan. 
 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon