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

Enabling Search Filter on Grid Dropdown

Hi,

col.Field("LinnworksCategory").HeaderText("Linnworks Category").Width(65).AllowEditing(True).Visible(False).DataSource(ViewData("LinnworksCats")).EditType(EditingType.Dropdown).Add()

How can I enable the search filter on the above field so that when the cell is edited there is a search box above the drop-down list?

Many Thanks,

Avi

20 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team March 16, 2017 03:38 PM UTC

Hi Avi, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want to use the ejDropDownList control while editing field with searching enabled in the ejDropDownList. 

In the attached sample we have enable the enableFilterSearch property for the “EmployeeID” column’s ejDropDownList  in the actionComplete event ejGrid control. 

Refer the below code example. 


@(Html.EJ().Grid<object>("FlatGrid") 
            .Datasource((IEnumerable<object>)ViewBag.datasource) 
            .AllowPaging()    /*Paging Enabled*/ 
            .ClientSideEvents(ce=>ce.ActionComplete("complete")) 
            .EditSettings(es => { es.AllowAdding().AllowDeleting().AllowEditing(); }) 
        .Columns(col => 
        { 
            col.Field("OrderID").HeaderText("Order ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 
            col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add(); 
 
            col.Field("EmployeeID").HeaderText("Employee ID").AllowEditing(true).EditType(EditingType.Dropdown).TextAlign(TextAlign.Right).Width(75).Add(); 
            col.Field("Freight").HeaderText("Freight").TextAlign(TextAlign.Right).Width(75).Format("{0:C}").Add(); 
 
        })) 
 
<script type="text/javascript"> 
 
    function complete(args) { 
 
        if (args.requestType == "beginedit") { 
 
            var dropdownObj = $("#" + this._id + "EmployeeID").ejDropDownList('instance'); /* Get the object of EmployeeId column ejDropDownList */ 
 
            dropdownObj.option({enableFilterSearch:true});  /*Enable the filtersearch property to the ejDropDownList control. 
        } 
    } 
 
</script> 


We have prepared a sample and it can be downloadable from the below location. 


Refer the help documentation. 



Regards, 
Thavasianand S. 



AS Avi Segal March 16, 2017 03:51 PM UTC

Perfect!

Thanks,

Avi


TS Thavasianand Sankaranarayanan Syncfusion Team March 17, 2017 06:12 PM UTC

Hi Avi, 

We are happy that the problem has been solved. 
 
Please get back to us if you need any further assistance.  
 
Regards, 
Thavasianand S. 



JC John Chellah March 14, 2018 12:13 PM UTC

Hey there,

great solution! 

Is there any way to get the access to the events of this "custom dropdownlist"? I need especially the change event, to fire the grid save button if the value from the dropdownlist changed.

PS: Im not using Essential 1 JavaScript, but this solution worked fine for me.

Many thanks,
John


TS Thavasianand Sankaranarayanan Syncfusion Team March 15, 2018 01:19 PM UTC

Hi John, 
 
We have achieved your requirement using edit template feature in Grid. In this feature, we can customize the other controls while editing the Grid.  
 
Please refer to the following code example and Help documentation,  
 
Code example:  
 
  let grid: Grid = new Grid(  
        {  
            dataSource: orderData,  
           . .  .  
            columns: [  
               .     .  
                {  
                    field: 'ShipCountry', headerText: 'Ship Country', editType:'dropdownedit', width: 150,  
                    edit: {   create: () => {  
                    elem = document.createElement('input');  
                    return elem;  
                },  
                read: () => {  
                    return dropdownObj.value;  
                },  
                destroy: () => {  
                    dropdownObj.destroy();  
                },  
                write: (args: { rowData: Object, column: Column }) => {  
                    dropdownObj  = new DropDownList({  
              // set the local data to dataSource property  
              dataSource: orderData,  
              // map the appropriate columns to fields property  
              fields: { text: 'ShipCountry' },  
              // set the value to DropDownList  
              value: args.rowData[args.column.field],  
              //binding the change event of Dropdown list  
              change: ()=>{  
                //Save the Grid edited row while changing the Dropdown list  
                document.querySelector("#Grid").ej2_instances[0].editModule.endEdit()  
              },  
              // set the height of the popup element  
              popupHeight: '200px'  
  
  
                });  
                dropdownObj.appendTo(elem);  
  
                }  
. .  .  
  
 
We can save the Grid record by calling the endEdit method while changing the Dropdown list value.  
 
Please refer to the following code example and Help documentation,  
 
Code example: 
  
              change: ()=>{  
                //Save the Grid edited row while changing the Dropdown list  
                grid.editModule.endEdit()  
              },  
  
 
 
We have also prepared a sample for your convenience which can be referred from following link,  
 
Please let us know if you have any further assistance on this.  
 
Regards, 
Thavasianand S. 



JC John Chellah March 20, 2018 07:02 AM UTC

Thank you very much for this detailed solution!!

But I'm so sorry. I've mistyped....I'm using Essential 1 JavaScript and my grid is written in JavaScript and there is only a write, read and create event.

My Grid Config:

$("#fileTable").ejGrid({
    dataSource: carData,
...
    actionComplete: function (args) {
        if (args.requestType === "beginedit") {

            var dropdownObj = $("#" + this._id + "Car").ejDropDownList("instance");
            dropdownObj.option({ enableFilterSearch: true });
        }
        if (args.requestType === "save") {
            //stuff..
        }
    },
    columns: [
        {
            headerText: "Choose...",
            field: "Car",
            editType: "dropdownedit",
            foreignKeyField: "Key",
            foreignKeyValue: "Value",
            dataSource: cars,
            tooltip: "{{:value}}",
            type: "string"
        }
    ]
});

Many Thanks,

John


TS Thavasianand Sankaranarayanan Syncfusion Team March 20, 2018 11:50 AM UTC

Hi John, 
 
Thanks for your clarification on using Essential JavaScript 1. 
 
We can achieve your requirement using the editTemplate feature of ejGrid control and also we can bound the change of ejDropDownList in the write event editTemplate. 
 
Refer the below code example. 
 
 
<script type="text/javascript"> 
        $(function () { 
            $("#Grid").ejGrid({ 
                // the datasource "window.gridData" is referred from jsondata.min.js 
                dataSource: window.gridData, 
                 
                ---- 
 
                columns: [ 
                        { field: "OrderID", isPrimaryKey: true, headerText: "Order ID", textAlign: ej.TextAlign.Right, validationRules: { required: true, number: true }, width: 90 }, 
                        { field: "CustomerID", headerText: 'Customer ID', validationRules: { required: true}, 
 
                            editTemplate: { 
 
                                create: function () { 
                                    return "<input>"; 
                                }, 
 
                                read: function (args) { 
                                    return args.ejDropDownList("getSelectedValue"); 
                                }, 
 
                                write: function (args) { 
                                    var data = ej.DataManager(window.gridData).executeLocal(new ej.Query().select("CustomerID")); 
 
                                    args.element.ejDropDownList({ width: "100%", change: "DropDownChangeEvent", dataSource: data, value: args.rowdata !== undefined ? args.rowdata["CustomerID"] : "" }); 
                                } 
                            }, width: 90 
                        }, 
                         
                         ---- 
 
                ] 
            }); 
 
        }); 
        function DropDownChangeEvent(args){             
            var gridObj = $("#Grid").ejGrid('instance'); 
            gridObj.endEdit(); 
        }  
    </script> 
 
   
We have prepared a simple JsPlayGround Sample in  the following link. 
 
 
Refer the help documentation. 
 
 
 
 
 
Regards, 
Thavasianand S. 



JC John Chellah March 21, 2018 06:37 AM UTC

Thank you,

works fine...but my datasource is an array of Key-Value-Pairs and I only get the access to one if the objects (key or value).

Is there anyway to bind foreignKeyField and foreignKeyValue to my datasource?

Many thanks,
John


TS Thavasianand Sankaranarayanan Syncfusion Team March 22, 2018 11:35 AM UTC

Hi John, 
 
We have prepared a sample with foreignkey field enabled column and having editTemplate feature in the following JsPlayground link. 
 
 
Refer the below code example. 
 
 
  <script type="text/javascript"> 
        $(function () { 
            var data = window.gridData; 
            var dropdata = [ { key:"1", value: "Nancy" }, { key:"2", value: "Andrew" },                          { key:"3", value: "Janet" }, 
 
--- 
 
]; 
            $("#Grid").ejGrid({ 
                dataSource: data, 
 
                ---          
 
                columns: [ 
                        { field: "OrderID", width: 80, isPrimaryKey: true,textAlign: ej.TextAlign.Right,validationRules: {required:true, number: true },headerText: "Order ID"} , 
                        { field: "EmployeeID", foreignKeyField: "key", foreignKeyValue: "value", dataSource: dropdata, width: 75, headerText: "First Name", editTemplate: { 
                                create: function () { 
                                    return "<input>"; 
                                }, 
                                read: function (args) { 
                                 return args.ejDropDownList("getSelectedValue"); 
                                }, 
                                write: function (args) { 
                                   args.element.ejDropDownList({ width: "100%",fields: { text: "value", value: "key" }, change: "DropDownChangeEvent", dataSource: dropdata, value: args.rowdata !== undefined ? args.rowdata["EmployeeID"] : "" }); 
                                } 
                            } }, 
 
                      ---- 
 
                ] 
            }); 
        }); 
 
 
Refer the help documentation. 
 
 
 
Regards, 
Thavasianand S. 



JC John Chellah March 22, 2018 11:59 AM UTC

Perfect!!!!!!

Thanks :)


TS Thavasianand Sankaranarayanan Syncfusion Team March 23, 2018 05:52 AM UTC

Hi John, 
 
We are happy that the problem has been solved. 
 
Please get back to us if you need any further assistance.  
                          
Regards, 
Thavasianand S.                         



AA aalhafi May 2, 2018 12:22 PM UTC

Hi in my case I have a partialview with a form and inside the form there is a grid with dropdownlist and enablefiltersearch is set to true.

My problem is when I try to edit or add in IE 9 to IE 11 filter search is not working.

I tried in Chrome and it is working fine but users are using IE only.


MP Manivannan Padmanaban Syncfusion Team May 3, 2018 01:23 PM UTC

Hi  John, 

Based on your query we have created the sample in partial view, the enablefiltersearch  of dropdown is working fine in IE9 -IE11. Please refer the below link for sample, 


And also please confirm the following details, that help us to resolve the issue as early as possible. 

  1. Share the complete code example.
  2. Share the exact issue scenario.
  3. Are your facing any error while searching the dropdown. If yes, please share the error details.
  4. Share the issue replication procedure (or) reproduce the issue in the provided sample.
  5. If possible share the video demo of the issue.

Regards, 

Manivannan Padmanaban. 




AA aalhafi May 7, 2018 10:09 AM UTC




Hi,

I am using
  •  Syncfusion 15.2.0.46
  • jquery 3.1.1

Basically, the view contains partial view which is a bootstrap dialog box that contains a <form> and inside that form there is ejTab inside the tab there is an ejGrid
which contains the dropdown with enablefiltersearch: true. Here is a screenshot for you to get an idea.



When I make search, the search event is not triggered.


When I load the page it shows these messages:



When I click this warning it shows the following:





I also use these app settings because I am using jquery-validate : 



Regards, 



TS Thavasianand Sankaranarayanan Syncfusion Team May 8, 2018 05:37 PM UTC

Hi Abdull, 

We have prepared a sample based on your given instruction and we are not able to reproduce the reported issue from our end. 

Sample can be downloadable from the below location. 


We have prepared a video demonstration of not reproduction of the issue. 


Please provide the following details for better assistance. 

  1. Share video demonstration of the issue.
  2. Share Grid code example.
  3. If possible share the issue reproducible sample or reproduce the issue in the attached sample.

Regards, 
Thavasianand S. 



AA aalhafi June 20, 2018 10:39 AM UTC


When I try to add or edit a row it is giving me the following error. Then search will not work only for IE

Unhandled exception at line 421, column 6 in http://localhost:33249/Scripts/jquery.validate.js
0x800a138f - JavaScript runtime error: Unable to get property 'settings' of undefined or null reference occurred.


This is the ejTab Template:

data.Add().ID("Address").Text("Address").ContentTemplate(@<div>
                                        @(Html.EJ().Grid<CustomerAddressViewModel>("CustomerAddressGrid")
                                                            .Datasource((IEnumerable<CustomerAddressViewModel>)ViewData["Addresses"])
                                                            .AllowPaging().PageSettings(p => { p.PageSize(10); }).Locale("ar-BH")
                                                            .EditSettings(edit =>
                                                            {
                                                                 edit.AllowEditOnDblClick(false);
                                                                 edit.AllowEditing(true);
                                                                 edit.AllowAdding(true);
                                                                 edit.AllowDeleting(true);
                                                                 edit.ShowDeleteConfirmDialog();
                                                                 edit.RowPosition(RowPosition.Bottom);
                                                                // edit.EditMode(EditMode.DialogTemplate).DialogEditorTemplateID("#template");
                                                             })
                                                            .ToolbarSettings(toolbar =>
                                                            {
                                                                 toolbar.ShowToolbar().ToolbarItems(items =>
                                                                 {
                                                                     items.AddTool(ToolBarItems.Add);
                                                                     items.AddTool(ToolBarItems.Edit);
                                                                     items.AddTool(ToolBarItems.Delete);
                                                                     items.AddTool(ToolBarItems.Update);
                                                                     items.AddTool(ToolBarItems.Cancel);
                                                                 });
                                                             })
                                                            .Columns(col =>
                                                            {
                                                                 col.Field("CutomerAddressID").IsPrimaryKey(true).Visible(false).IsIdentity(true).AllowEditing(false).Add();
                                                                 col.Field("CutomerCPR").Visible(false).Add();
                                                                 col.Field("Address_Flat_Villa").EditType(EditingType.String).Add();
                                                                 col.Field("Address_Building").EditType(EditingType.String).Add();
                                                                 col.Field("LT_BlockNO").EditType(EditingType.Dropdown).ForeignKeyField("BlockID").ForeignKeyValue("BlockNO").DataSource((List<LookupAddress_2_Block>)ViewData["BlockNos"]).Add();
                                                                 col.Field("LT_RoadNO").EditType(EditingType.Dropdown).ForeignKeyField("RoadID").ForeignKeyValue("RoadNO").Add();
                                                                 col.Field("LT_GovernorateID").EditType(EditingType.Dropdown).ForeignKeyField("GovernorateID").ForeignKeyValue("GovernorateEN").Add();
                                                                 col.Field("isActive").EditType(EditingType.Boolean).Add();
                                                             })
                                                            .ClientSideEvents(eve =>
                                                            {
                                                                 eve.ActionComplete("addressActionComplete")
                                                                 .ActionBegin("addressBegin")
                                                                 .BeginEdit("addressBeginEdit")
                                                                 .EndEdit("addressEndEdit")
                                                                 .EndAdd("addressEndAdd");
                                                             }))
                                    </div>);      






AA aalhafi June 20, 2018 10:43 AM UTC

and these are the functions:

function addressActionComplete(args) {
        if (args.requestType == "beginedit" || args.requestType == "add") {
            $("#CustomerAddressGridLT_RoadNO").ejDropDownList({
                enabled: false,
                fields: { foreignKeyField: "RoadNO", foreignKeyValue: "", field: "LT_RoadNO", text: "RoadNameA", value: "RoadNO" },
                enableIncrementalSearch: true
            });// Enables the search operation of the dropdown control.

            $("#CustomerAddressGridLT_GovernorateID").ejDropDownList({
                enabled: false,
                fields: { foreignKeyField: "GovernorateID", foreignKeyValue: "", field: "LT_GovernorateID", text: "GovernorateEN", value: "GovernorateID" },
                enableIncrementalSearch: true
            });

            if (args.requestType == "beginedit") {
                $("#CustomerAddressGridAddress_Flat_Villa").val(args.rowData.Address_Flat_Villa);
                $("#CustomerAddressGridAddress_Building").val(args.rowData.Address_Building);
                $("#CustomerAddressGridLT_RoadNO").data("ejDropDownList").selectItemByValue(args.rowData.LT_RoadNO);
                $("#CustomerAddressGridisActive").prop("checked", args.rowData.isActive);
            }
        }
        if (args.requestType == "save" && args.action == "edit") {
            var gridObj = $("#CustomerAddressGrid").ejGrid("instance");
            gridObj.refreshContent();
        }
    }

    function ValChange(args) {
        $("#formChanged").val(true);
        $("#rcomain").ejWaitingPopup("show");
        if (this._id == "CustomerAddressGridLT_BlockNO") {
            $.ajax({
                url: '@Url.Action("GetRoadsAndGovs")',
                data: { blockID : args.text },
                type: 'post',
                dataType: 'json',
                success: function (data) {
//Gets the value of the corresponding description filed value for the selected CategoryName from the dataSource.
                    $("#CustomerAddressGridLT_RoadNO").ejDropDownList({ dataSource: data.roads, enabled: true, enableIncrementalSearch: true });

                    $("#CustomerAddressGridLT_GovernorateID").ejDropDownList({ dataSource: data.governorates, value: data.GovernorateID, enabled: false, enableIncrementalSearch: false });

                    $("#rcomain").ejWaitingPopup("hide");
                },
                error: function (e) {
                    console.log(e);
                    $("#rcomain").ejWaitingPopup("hide");
                }
            });
        }
    }

    function addressBegin(args) {
        if (args.requestType == "add" || args.requestType == "beginedit") {
            if ($("#CustomerAddressGridLT_BlockNO") != undefined || $("#CustomerAddressGridLT_BlockNO") != null) {
                $.ajax({
                    url: '@Url.Action("GetBlockData")',
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                        $("#CustomerAddressGridLT_BlockNO").ejDropDownList({
                            dataSource: data.blocks,
                            fields: { foreignKeyField: "BlockNO", foreignKeyValue: "BlockNO", field: "LT_BlockNO", text: "BlockNO", value: "BlockNO" },
                            change: "ValChange",
                            enableFilterSearch: true
                        });
                    }
                });

            }
        }
        if (args.requestType == "save")
            args.data.isActive = $('#CustomerAddressGridisActive').is(':checked');
    }

    function addressEndAdd(args) {
        if (args.action == "add") {
            args.data.CutomerAddressID = (args.model.dataSource.length == null ? 1 : args.model.dataSource.length);
            args.data.CutomerCPR = $("#CutomerCPR").val();
        }
        var gridObj = $("#CustomerAddressGrid").ejGrid("instance");
        gridObj.refreshContent();
    }


TS Thavasianand Sankaranarayanan Syncfusion Team June 22, 2018 01:03 PM UTC

Hi Abdull,  

Query 1: Unable to get property ‘settings’ of undefined. 

The reported issue may occur due to one of the reasons mentioned below. 

  1. We have used HTML form for editing grid records and hence placing the grid element inside a form will results in nested form elements(which is not a valid HTML markup and also the cause of the issue). So, please ensure that the grid element is not rendered inside a form element.
  2. If both the Jquery.validate.min.js and Jquery.validate.unobtrusive.min.js file are referred in your application the mentioned issue occur. So please ensure you have referred only jquery.validate.min.js file only which is required for validation.
 
Query 2: DropDown filter search is not work on IE. 

In your given code example you have mention three columns “LT_BlockNO, LT_RoadNO, LT_GovernorateID” as ejDropDownList but you have disabled the “LT_RoadNo, LT_GovernorateID” DropDownList when rendering it in actionComplete event of ejGrid. Finally you have the LT_BlockNo column as ejDropDownList in actionBegin event of ejGrid control. This is not the recommended way to render the ejDropDownList in Grid editform. Because in the actionBegin event, Grid edit form is not rendered so we suggest you to use the actionComplete event of ejGrid control as you render the other two DropDownList columns in Grid. 

Regards, 
Thavasianand S.


AA aalhafi June 25, 2018 07:09 AM UTC

Hi,

I removed the grid from the form, only used jquery.validate and changed the code to the following but still filter search is not working in IE11:

function addressActionComplete(args) {
        if (args.requestType == "beginedit" || args.requestType == "add") {
            $.ajax({
                url: '@Url.Action("GetBlockData")',
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    $("#CustomerAddressGridLT_BlockNO").ejDropDownList({
                        dataSource: data.blocks,
                        fields: {  field: "LT_BlockNO", text: "BlockNO", value: "BlockNO" },
                        change: "ValChange",
                        enableFilterSearch: true,
                        search: function (args) {
                            console.log(args);
                        }
                    });
                }
            });

            if (args.requestType == "beginedit") {
                $("#CustomerAddressGridAddress_Flat_Villa").val(args.rowData.Address_Flat_Villa);
                $("#CustomerAddressGridAddress_Building").val(args.rowData.Address_Building);
                $("#CustomerAddressGridLT_BlockNO").data("ejDropDownList").selectItemByValue(args.rowData.LT_BlockNO);
                $("#CustomerAddressGridLT_RoadNO").data("ejDropDownList").selectItemByValue(args.rowData.LT_RoadNO);
                $("#CustomerAddressGridisActive").prop("checked", args.rowData.isActive);
            }
        }
        if (args.requestType == "save" && args.action == "edit") {
            var gridObj = $("#CustomerAddressGrid").ejGrid("instance");
            gridObj.refreshContent();
        }
    }

    function ValChange(args) {
        $("#formChanged").val(true);
        $("#rcomain").ejWaitingPopup("show");
        if (this._id == "CustomerAddressGridLT_BlockNO") {
            $.ajax({
                url: '@Url.Action("GetRoadsAndGovs")',
                data: { blockID : args.text },
                type: 'post',
                dataType: 'json',
                success: function (data) {
                    $("#CustomerAddressGridLT_RoadNO").ejDropDownList({
                        dataSource: data.roads,
                        enabled: true,
                        enableFilterSearch: true,
                        fields: { foreignKeyField: "RoadNO", foreignKeyValue: "", field: "LT_RoadNO", text: "RoadNameA", value: "RoadNO" },
                        enableIncrementalSearch: true,
                        actionFailure: function (args) {
                            console.log(args);
                        }
                    });// Enables the search operation of the dropdown control.

                    //LT_GovernorateID
                    $("#CustomerAddressGridLT_GovernorateID").ejDropDownList({
                        dataSource: data.governorates,
                        value: data.GovernorateID,
                        enabled: true,
                        fields: { foreignKeyField: "GovernorateID", foreignKeyValue: "", field: "LT_GovernorateID", text: "GovernorateEN", value: "GovernorateID" },
                        enableIncrementalSearch: true,
                        actionFailure: function (args) {
                            console.log(args);
                        }
                    });
                    $("#rcomain").ejWaitingPopup("hide");
                },
                error: function (e) {
                    console.log(e);
                    $("#rcomain").ejWaitingPopup("hide");
                }
            });
        }
    }

    function addressBegin(args) {
        if (args.requestType == "save")
            args.data.isActive = $('#CustomerAddressGridisActive').is(':checked');
    }

    function addressEndAdd(args) {
        if (args.action == "add") {
            args.data.CutomerAddressID = (args.model.dataSource.length == null ? 1 : args.model.dataSource.length);
            args.data.CutomerCPR = $("#CutomerCPR").val();
        }
        var gridObj = $("#CustomerAddressGrid").ejGrid("instance");
        gridObj.refreshContent();
    }



TS Thavasianand Sankaranarayanan Syncfusion Team June 26, 2018 11:20 AM UTC

Hi Abdull, 

As we unable to reproduce the mentioned issue with the given information. So, we request you to setup a web meeting to look into it and provide the resolution. A support incident has been created under your account to track the status of this requirement. Please log on to our support website to check for further updates.  
 

Regards, 
Thavasianand S. 


Loader.
Live Chat Icon For mobile
Up arrow icon