can't see the whole popup of the filter

[Luis Carlos]

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]

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  

 

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

 

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 

 

https://help.syncfusion.com/api/js/ejgrid#events:actionbegin  

 

https://help.syncfusion.com/api/js/ejgrid#events:actioncomplete  

 

Please get back to us if you need any further assistance. 

 

Regards, 

Vignesh Natarajan.