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
close icon

Custom menu filter

Hello.

I´m using the grid´s menu filter option. My domain-model contains an enum-field (int base).
I would like the user to be able to filter by this enum field using a dropdown field.
How can I achieve this?

Thank you for your help!

All the best,
Florian

3 Replies

MS Mani Sankar Durai Syncfusion Team November 28, 2016 11:42 AM UTC

Hi Florian, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and achieved your requirement by using filterBarTemplate property of grid columns which helps to filter the data in grid for the particular column. Using filterBarTemplate property we can render any control like autoComplete, DropDownList etc..,to filter the grid data for the particular column. 

We have also prepared a sample that can be downloaded from the below link. 

Also please refer the below code example. 
$("#Grid").ejGrid({ 
            allowFiltering:true, 
                   ... 
                        columns: [ 
                {     
                           // Field dropdown is an enum field 
                    field: "DropDown", width: 100, filterBarTemplate: { 
                        write: function (args) { 
                            var data =   @(Html.Raw(Json.Encode(ViewData["EmployeeID"]))); 
                            args.element.ejDropDownList({ width: "100%", dataSource: data, change: ej.proxy(args.column.filterBarTemplate.read, this, args) }) 
                        }, 
                        read: function (args) { 
                            if (args.element.val() == "clear") { 
                                this.clearFiltering(args.column.field); 
                                args.element.val("") 
                            } 
                            this.filterColumn(args.column.field, "equal", args.element.val(), "and", true) 
                        }, 
                    } 
                }, 
                      ...            ] 
        }); 
    }); 

From the above code example, the Field named as dropdown is an enum field and when using filterBarTemplate we have rendered the dropdown to the particular column to filter. In dropdown, the value has been be set as 0 and 1 and if we select the value then the text will be displayed again according to the value.    
Refer the online sample link: 

In this sample CustomerID and EmployeeID column have used filterBarTemplate to filter the grid 

Please let us know if you need further assistance. 

Regards, 
Manisankar Durai. 



FM Florian Mihalits April 5, 2017 09:50 AM UTC

Hello.

Would you please be so kind to show me an example with the filtertype set to menu? (filterType: "menu").

All the best,
Florian



JK Jayaprakash Kamaraj Syncfusion Team April 7, 2017 01:04 PM UTC

Hi Florian, 

We have achieved your requirement using create event of ejGrid.  In the create event of the Grid, enable the showPopupButton property of the ejAutoComplete control. So that, the AutoComplete in the filter menu dialog acts as Dropdownlist and also set type property as string for that column. Please refer to the below code example and sample. 
create: function(args){ 
        this.element.on("mousedown", ".e-gridheader .e-filtericon", function () { 
            $("#Grid_stringDlg").ejDialog({ 
                //open event of the filter menu dialog 
                open: function (e) { 
                    //Disables the operator dropdownlist and equal as default operator such that only discrete values are filtered. 
                    $("#Gridstring_ddinput").ejDropDownList("setSelectedText", "Equal"); 
                    $("#Gridstring_ddinput").ejDropDownList("model.enabled", false); 
                    //Enables the 'showPopupButton' to act as dropdownlist 
                    var dp = this.element.find(".e-autocomplete"), instance; 
                    if (dp.length) { 
                        instance = dp.data("ejAutocomplete"); 
                        if (!instance.option("model.showPopupButton")) 
                            instance.option("model.showPopupButton", true); 
                    } 
                } 
            }); 
        }); 
    }, 
……. 
{ field: "EmployeeID", headerText: "Employee ID", textAlign: ej.TextAlign.Right,type:"string", width: 130 }, 
 
 
Regards, 
Jayaprakash K. 
 


Loader.
Live Chat Icon For mobile
Up arrow icon