Fixed/Static dropdown filter on grid menu

[Jorge]

Hello,

I am having trouble implementing a dropdown filter for the grid with custom elements in MVC/Razor. I am using a menu filter.

I was able to do it with filterbar but not with menu nor excel.

What I need is very similar to the example provided in : https://www.syncfusion.com/kb/7723/how-to-customize-the-controls-inside-menu-filter-dialog

I tried to replicate on http://jsplayground.syncfusion.com/fxcuzjqo

As a reference: 

I need a list I can manually populate, like in this code:

<div id="Grid"></div>
          
    <script type="text/javascript">
        $(function () {
            $("#Grid").ejGrid({
                // the datasource "window.gridData" is referred from jsondata.min.js
                dataSource: window.gridData,
                allowPaging: true,
                create: "onCreate",
                allowFiltering: true,
                filterSettings: {filterType: "menu"},
                columns: [
                      { field: "OrderID", headerText: "Order ID" },
                      { field: "CustomerID", headerText: "Customer ID" },
                      { field: "Freight", width: 100, format: "{0:C}" },
                      { field: "ShipCountry", headerText: "Ship Country" },
                      { field: "ShipCity", headerText: "Ship City" }
                ],
            });
        });
    </script>
  
   <script>
     function onCreate(args) {
            $("#" + this._id + "_" + "stringDlg").ejDialog({
                //bind the open event for the filter dialog
                open: function (args) {
                    var gridObj = $("#Grid").ejGrid("instance"),
                    curField = $(".e-autocomplete").ejAutocomplete("model.fields.text");
     
                    // data = ej.distinct(window.gridData, curField);
                                        data = ["AAA", "BBB", "CCC", "HANAR", "WELLI", "HILAA"] 
                    //Render the ejDropDownList instead of ejAutoComplete
                    $(".e-autocomplete").ejAutocomplete("destroy");
                    $("#"+ gridObj._id + "_acString").ejDropDownList({dataSource: data, width:"100%"});
     //alert(data)     
     //alert(curField)
                }
            })
        }
   </script>

But in MVC/Razor ( @(Html.EJ().Grid<Plane.Web.Models.AceptacionReclamo.DocumentoViewModel>("FlatGrid") ... )

Would be great if I can hide the filter kind ("StartsWith") so it displays only the dropdown list too.

Can you give me a hand? I tried to add same code by using ClientSideEvents(c=>c.Create("onCreate")) but I was unsuccesfull.

The code I tried is:

 function onCreate(args) {
               

                $("#" + this._id + "_" + "stringDlg").ejDialog({
                    //bind the open event for the filter dialog
                    open: function (args) {
                        
                        var gridObj = $("#FlatGrid").ejGrid("instance"),
                            curField = $(".e-autocomplete").ejAutocomplete("model.fields.text");
                        if (curField == "AceptaReclamo") { // My field, the one I want to filter 
                            alert("AR!")
                            // data = ej.distinct(window.gridData, curField);
                            data = ["ERM", "RFP", "RFT", "ACD", "RCD"] // My options 
                            //Render the ejDropDownList instead of ejAutoComplete
                            $(".e-autocomplete").ejAutocomplete("destroy");
                            $("#" + gridObj._id + "_acString").ejDropDownList({ dataSource: data, width: "100%" });
                            alert(data)
                        }
                        else { // Ignore 
                            alert("Nope")
                        }
                    }
                }) 

            }

Thank you in advance,

[Sathyanarayanamoorthy Eswararao]

Hi Jorge, 

Thanks for contacting Syncfusion support. 

According to your query you need to hide the Filter Operator Dropdownlist from the menu filter . We have achieved your requirement using open event of ejDialog.  

Please refer the below code example. 

    function onCreate(args) { 

 

        $("#" + this._id + "_" + "stringDlg").ejDialog({ 

            //bind the open event for the filter dialog  

            open: function (args) { 

 

                var gridObj = $("#FlatGrid").ejGrid("instance"), 

                    curField = $(".e-autocomplete").ejAutocomplete("model.fields.text"); 

                

 

                $("#" + this._id).find(".e-operator").hide(); 

 

                    // data = ej.distinct(window.gridData, curField); 

                    data = ["ERM", "RFP", "RFT", "ACD", "RCD"] // My options  

                    //Render the ejDropDownList instead of ejAutoComplete  

                    $(".e-autocomplete").ejAutocomplete("destroy"); 

                    $("#" + gridObj._id + "_acString").ejDropDownList({ dataSource: data, width: "100%" }); 

                

            } 

        }) 

    } 

If you hide the operator,  then by default StartsWith operator will be selected and you cannot change the other operators. So, please share the purpose of hiding the operator then only we can provide the solution according to your requirement. 

We have prepared a sample with same requirement which can be downloaded from below location. 

Sample: http://www.syncfusion.com/downloads/support/forum/137416/ze/Grid-620725700.zip  

Regards, 

Sathyanarayanamoorthy 

[Jorge]

Hello,

I tried your demo but I cannot apply the filter twice. It only works the first time. After that I cannot clear nor change it, I have to reload.

Besides that is what I need. Would be great to have a feature like this our of the box.

Hope you can help me make it work.

Regards,

Jorge

[Jorge]

I forgot to mention:

Once the dropdown is set, is the same for all columns of same type, as seems its global.

Would like to have a special "dropdown" only for specific fields.

Regards,

Jorge

[Manivannan Padmanaban]

Hi Jorge, 

To avoid the reported issue we suggest you add the input class to the dropdown list refer the  below code example, 

 function onCreate(args) {  

  

        $("#" + this._id + "_" + "stringDlg").ejDialog({  

            //bind the open event for the filter dialog   

            open: function (args) {  

  

                var gridObj = $("#FlatGrid").ejGrid("instance"),  

                    curField = $(".e-autocomplete").ejAutocomplete("model.fields.text");  

                 

  

                $("#" + this._id).find(".e-operator").hide();  

  

                    // data = ej.distinct(window.gridData, curField);  

                    data = ["ERM", "RFP", "RFT", "ACD", "RCD"] // My options   

                    //Render the ejDropDownList instead of ejAutoComplete   

                    $(".e-autocomplete").ejAutocomplete("destroy");  

                    $("#" + gridObj._id + "_acString").ejDropDownList({ dataSource: data, width: "100%" });  

                               $("#" + gridObj._id + "_acString").addClass("input e-js"); 

 

                 

            }  

        })  

    }  

Sample link:  http://www.syncfusion.com/downloads/support/forum/137416/7z/Grid1595136568  

Regards, 

Manivannan Padmanaban. 

[Jorge]

Hi,

I was able to do "most" of the requirement. However, my current problem is:

As the combo is set for all string-like fields, not for the column, when I change it all string-columns gets the combo.

I want a standar filter with autocomplete to work on the other columns.

So far what I got is in:

http://jsplayground.syncfusion.com/fxcuzjqo

So, I can set static options on two fields (CustomerID and ShipCountry).

BUT ShipCity should use the AutoComplete filter. How do I recreate it?

Here is the onCreate:

function onCreate(args) {

        $("#" + this._id + "_" + "stringDlg").ejDialog({
            //bind the open event for the filter dialog
            open: function (args) {
              
                var gridObj = $("#FlatGrid").ejGrid("instance"),
                    curField = $(".e-autocomplete").ejAutocomplete("model.fields.text");

                var _html = document.getElementsByTagName('pre')[0];
                _html.innerText = _html.innerText + "\n:" + curField

         

                    // data = ej.distinct(window.gridData, curField);

                if (curField == "CustomerID" || curField == "ShipCountry") {

                    $("#" + this._id).find(".e-operator").hide();

                    if (curField == "CustomerID")
                        data = ["FOLKO", "BLONP", "WARTH", "FRANK", "RATTC"] // My options
                    else if (curField == "ShipCountry")
                        data = ["USA", "Germany"]
                    $(".e-autocomplete").ejAutocomplete("destroy");
                    $("#" + gridObj._id + "_acString").ejDropDownList({ dataSource: data, width: "100%" });
                 
                }
                else { /* Reset to standar filter: How? */
                    $("#" + this._id).find(".e-operator").show();
                    //$(".e-autocomplete").ejDropDownList("destroy");
                    //$("#" + gridObj._id + "_acString").ejAutocomplete({ dataSource: data, width: "100%" });
                    //
                }
                    //Render the ejDropDownList instead of ejAutoComplete
                $("#" + gridObj._id + "_acString").addClass("input e-js");
            }
        })
    }

Thank you!

[Sathyanarayanamoorthy Eswararao]

Hi Jorge, 

According to your query you need the dropdownlist to be used for the specified columns and for the other columns autocomplete should be used. We have achieved your requirement in the below code example. 

Refer the below code example. 

 

function onCreate(args) {  

            $("#" + this._id + "_" + "stringDlg").ejDialog({  

                //bind the open event for the filter dialog  

                open: function (args) {  

                    var gridObj = $("#Grid").ejGrid("instance"),  

                    curField = $(".e-autocomplete").ejAutocomplete("model.fields.text"); 

                    if(curField == "CustomerID" || curField == "ShipCountry"){ 

                        $("#" + this._id).find(".e-operator").hide(); 

                    // data = ej.distinct(window.gridData, curField); 

                    if (curField == "CustomerID") 

                        data = ["FOLKO", "BLONP", "WARTH", "FRANK", "RATTC"] // My options  

                    else if (curField == "ShipCountry") 

                        data = ["USA", "Germany"] 

                    //Render the ejDropDownList instead of ejAutoComplete  

                    $(".e-autocomplete").ejAutocomplete("destroy");  

                    $("#"+ gridObj._id + "_acString").ejDropDownList({dataSource: data, width:"100%"});  

                    //alert(data)                    

                    //alert(curField) 

                } 

                else { /* Reset to standard filter 

                    $("#" + this._id).find(".e-operator").show(); 

                    $(".e-value").find(".e-dropdownlist").ejDropDownList("destroy"); 

                    data = ej.distinct(window.gridData, curField); 

                    $("#" + gridObj._id + "_acString").removeClass("e-autocomplete"); 

                    $("#" + gridObj._id + "_acString").ejAutocomplete({ dataSource: data, width:"100%" }); 

                    // 

                } 

                }  

            })  

        } 

 

We have prepared an online sample for your convenience which can be referred from the below location. 

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

If you need any further assistance please get back to us. 

Regards, 

Sathyanarayanamoorthy