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. Image for the cookie policy date

can't see the whole popup of the filter

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.

1 Reply

VN Vignesh Natarajan Syncfusion Team 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. 
 


Loader.
Live Chat Icon For mobile
Up arrow icon