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. (Last updated on : November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Custom menu filter

Thread ID:

Created:

Updated:

Platform:

Replies:

127601 Nov 27,2016 05:01 PM UTC Apr 7,2017 01:04 PM UTC JavaScript 3
loading
Tags: ejGrid
Florian Mihalits
Asked On November 27, 2016 05:01 PM UTC

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 [Syncfusion]
Replied On 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. 


Florian Mihalits
Replied On 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


Jayaprakash Kamaraj [Syncfusion]
Replied On 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. 
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;