1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Is it possible to add filtering in a DropDownList in a ForeignKey column when you are adding / editing a record?

Is it possible to add filtering in a DropDownList in a ForeignKey column when you are adding / editing a record?

Hello, I am configuring a grid using URLadaptor and ForeignKeyColumn and I would like to know if a filter can be added to the DropDownList that appears in the ForeignKeyColumn when I add or edit a record if there are many elements in the DropDownList. I read your documentation and found this code fragment:

     col.Field("EmployeeID").HeaderText("Employee Name").Width("150").ForeignKeyValue("FirstName").DataSource(ViewBag.ForeignData).Edit(new { create = "create", read = "read", destroy = "destroy", write = "write" }).Add()

and the part of the JavaScript functions in which the DropDownList changes by an AutoComplete

<script>
    var autoComplete;
var employeeData = @Html.Raw(Json.Encode(@ViewData["ForeignData"]));
function create () { // to create input element
    return createElement('input');
}
    function read () { // return edited value to update data source
    let value = new ej.data.DataManager(employeeData).executeLocal(new ej.data.Query().where('LastName', 'equal', autoComplete.value));
    return value.length && value[0]['EmployeeID']; // to convert foreign key value to local value.
}
    function destroy () { // to destroy the custom component.
    autoComplete.destroy();
}
    function write (args) { // to show the value for custom component
    autoComplete = new ej.dropdowns.AutoComplete({
            dataSource: employeeData,
            fields: { value: args.column.foreignKeyValue },
            value: args.foreignKeyData[0][args.column.foreignKeyValue]
        });
    autoComplete.appendTo(args.element);
}

</script>
But I do not know if you can customize the DropDownList to add the filtering instead of changing it to an AutoComplete
Here is my Code:
@(Html.EJS().Grid("Grid")
                                .DataSource(dataManager =>
                                    dataManager.Url(Url.Action("GetAlbum", "JS2", null, Request.Url.Scheme))
                                    .InsertUrl( Url.Action( "InsertAlbum", "Ext", null, Request.Url.Scheme ) )
                                    .UpdateUrl( Url.Action( "UpdateAlbum", "Ext", null, Request.Url.Scheme ) )
                                    .Adaptor("UrlAdaptor").CrossDomain(true))
                .EditSettings( ed =>
                {
                    ed.AllowAdding( true ).AllowEditing( true ).NewRowPosition( Syncfusion.EJ2.Grids.NewRowPosition.Bottom ).Mode( Syncfusion.EJ2.Grids.EditMode.Normal );
                } )
                                .Columns(c =>
                                {
                                    c.Field("AlbumId").HeaderText("Id").IsPrimaryKey( true ).IsIdentity( true ).Add();
                                    c.Field("Title").Add();
                                    c.Field("ArtistId").HeaderText("Artist").ForeignKeyField("ArtistId").ForeignKeyValue("Name")
                                        .DataSource((IEnumerable<object>)ViewBag.artist).Add();
                                    c.Field("GenreId").HeaderText("Genre").ForeignKeyField("GenreId").ForeignKeyValue("Name")
                                        .DataSource((IEnumerable<object>)ViewBag.genre).Add();
                                }).Toolbar( new List<string>() { "Add", "Edit", "Update", "Cancel" } )
                                .Render()
            )
I hope you can help me. 
Thank you for your attention

3 Replies
PS Pavithra Subramaniyam Syncfusion Team April 4, 2019 05:28 AM UTC

Hi Juan, 
 
Thanks for contacting Syncfusion support. 
 
Yes, you can customize the DropDownList component to add filtering  by enabling the “allowFiltering” property by using “edit params” in Grid. 
 
Documentations :  
 
In the below code, we have enabled the “allowFiltering” property of DropDownList by using the “edit Params” in Grid. We suggest you to add the below highlighted code in the foreign key column in your application to enable filtering in the “DropDownList” rendered during editing a foreign key column. 
 
 
col.Field("EmployeeID")...ForeignKeyValue("ShipCountry").Edit(new { @params = new { allowFiltering = true } })...Add(); 
 
 
Please get back to us if you need further assistance. 
  
Regards              
Pavithra S. 


JC Juan Cruz April 4, 2019 04:41 PM UTC

Thanks for answering me. I have solved my problem. I only have one question: I can add more parameters in
.Edit(new { @params = new { allowFiltering = true } }) ?
Can I add a template for the DropDownList?

PS Pavithra Subramaniyam Syncfusion Team April 5, 2019 09:41 AM UTC

Hi Mike, 
 
We have analyzed your requirement, we could see that you would like to customize the drop down list rendered during editing the foreign key column. We suggest you to use the properties(“template” property to add templates or “allowFiltering” property to add filter) of the EJ2 DropDownList component and “edit.params” of the Grid column to achieve your requirement. In the below code we will be binding a “Load” event for Grid, in the load event handler we will be setting the “edit.params” for the foreign key column (DropDownList). Now you can use any property like “template”(to add templates in drop down) or any other Drop down list property as specified in the below documentations to achieve your requirement.  
 
DropDownList Documentations :  
 
Grid Documentations :  
 
Please refer the below code snippet, 
 
 
<div> 
    @Html.EJS().Grid("Grid")...Load("load")...Columns(col => 
        { 
            ... 
           col.Field("EmployeeID").HeaderText("Employee ID").ForeignKeyValue("ShipCountry").DataSource(ViewBag.datasource).Width("200px").Add(); 
        })...Render() 
</div> 
 
<script> 
    function load(args) { 
        this.getColumns()[1].edit = { 
            params: { 
                allowFiltering: true, 
                width: 200, 
                itemTemplate: "<span><span class='name'>${EmployeeID}</span><span class ='city'>${ShipCountry}</span></span>" 
            } 
        } 
    } 
</script> 
 
 
We have prepared the sample based on this requirement, we are attaching the sample for your convenience. Please download the sample form the link below, 
 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 


Loader.
Up arrow icon