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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

143756 Apr 4,2019 12:54 AM UTC Apr 5,2019 09:41 AM UTC ASP.NET MVC - EJ 2 3
loading
Tags: Grid
Juan Cruz
Asked On April 4, 2019 12:54 AM UTC

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

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


Juan Cruz
Replied On 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?

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


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

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

Live Chat Icon For mobile
Live Chat Icon