Custom menu filter

[Florian Mihalits]

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

[Mani Sankar Durai]

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. 

Link: http://www.syncfusion.com/downloads/support/forum/127601/ze/Sample118577218937564 

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: 

Link:  http://js.syncfusion.com/demos/web/#!/bootstrap/grid/filtering/defaultfunctionalities 

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. 

[Florian Mihalits]

Hello.

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

All the best,

Florian

[Jayaprakash Kamaraj]

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 }, 

 

 

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

Regards, 

Jayaprakash K.