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

Filtering a drop down list inside grid

Thread ID:

Created:

Updated:

Platform:

Replies:

149319 Nov 21,2019 03:08 PM UTC Nov 29,2019 03:46 AM UTC Blazor 7
loading
Tags: Grid
Junaid
Asked On November 21, 2019 03:08 PM UTC

I have an ASP.NET Core Blazor application. I am using a drop-down list to display foreign key while editing. The key value comes from an API.

Now I want to apply filtration on this column. How can I do this?

<EjsGrid TValue="Order" AllowFiltering="true" AllowSorting="true" AllowPaging="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })">
    <EjsDataManager Url="/Api/Orders" Adaptor="Adaptors.WebApiAdaptor"></EjsDataManager>
    <GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Normal"></GridEditSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderId) DefaultValue=0 IsIdentity="true" IsPrimaryKey="true" HeaderText="Order ID" TextAlign="TextAlign.Right"></GridColumn>
        <GridColumn Field=@nameof(Order.ProjectId) HeaderText="Projekt ID" EditType="EditType.DropDownEdit" TextAlign="TextAlign.Right"
        DataSource="@projectsDataSource"
        ForeignKeyField="Id" ForeignKeyValue="Name"></GridColumn>
    </GridColumns>
</EjsGrid>

@code{
    public List<ProjectVM> projectsDataSource { set; get; }
    public void ActionComplete(ActionEventArgs<Order> Args) { }
    protected override async Task OnInitializedAsync()
    {
        projectsDataSource = new List<ProjectVM>();
        projectsDataSource = await Http.GetJsonAsync<List<ProjectVM>>("/Api/Default/GetProjectsList");
    }
}

Thanks in advance.

Vignesh Natarajan [Syncfusion]
Replied On November 22, 2019 11:35 AM UTC

Hi Junaid,  

Thanks for contacting Syncfusion forums.  

Query: “Now I want to apply filtration on this column. How can I do this?” 

We suggest you to achieve your requirement using Edit params feature of EjsGrid. Using Edit property we can customize the default editor components inside the GridColumn. Refer the below code example.   

@using Syncfusion.EJ2.Blazor.Buttons 
@using Syncfusion.EJ2.Blazor.DropDowns 
@using Syncfusion.EJ2.Blazor.Grids 
@using Syncfusion.EJ2.Blazor.Inputs 
 
<EjsGrid DataSource="@OrderData" Toolbar=@ToolbarItems> 
    <GridEditSettings AllowEditing="true" AllowAdding="true" AllowDeleting="true"></GridEditSettings> 
    <GridColumns> 
. . . . . . . . .. . . .  
        <GridColumn Field=@nameof(Order.ShipName) HeaderText="Ship Name" TextAlign="TextAlign.Center" EditType="EditType.DropDownEdit" Edit="@ShipNameEditParams" Width="120"></GridColumn> 
. . . . . . . . . . . .. .  
    </GridColumns> 
</EjsGrid> 
 
@code{ 
. . . . . . . .. . . .  
public object ShipNameEditParams = new 
{ 
@@params = new EjsDropDownList<string>() { AllowFiltering = true } 
}; 
} 

Refer our UG documentation for your reference. 


Please get back to us if you have further queries.  

Regards, 
Vignesh Natarajan 


Junaid
Replied On November 23, 2019 11:12 AM UTC

Good day,

I did not understand your answer. You can see I am binding data from an API. Upon filtering, the filtered data is going to come from the API. How is this possible with the code you have provided? 

Thanks.



Vignesh Natarajan [Syncfusion]
Replied On November 25, 2019 12:32 PM UTC

Hi Junaid,  

Sorry for the inconvenience caused.  

Query: ” I did not understand your answer How is this possible with the code you have provided?” 
 
From your query (previous update ”Filtering a dropdownlist inside a grid”), we understood that you want to enable filtering to dropdownlist inside the GridColumn (while editing). So we have provided the solution to enable filtering to DropDownList.  

But now we are unclear about your requirement. So kindly share the following detail.  

  1. If you want to apply initial filter to Grid Column, please refer the below Ug documentation.
  1. Or Do you want to filter the dropdownlist based on the Grid current View records?
  2. Do you want to apply filter to dropdown list during the initial rendering or during a certain action?
  3. Kindly share more details about your requirement in detail.

Above requested details will be helpful for us to validate your requirement and provide the solution as soon as possible. 

Regards, 
Vignesh Natarajan. 
 


Junaid
Replied On November 27, 2019 09:13 AM UTC

 Good day,

As you know, with filtration enabled in the grid, an additional row is added to the top of the grid which shows a textbox for every column where the filtration value is provided. For OrderId the filtration value is typed inside its textbox and then I handle the filtration parameter inside my API and return results accordingly. I want to show a drop-down list for the filtration of ProjectId column rather than a textbox. So that if I select an option from that dropdown list a call is made to the Web API controller which contains the selected option's value NOT text, for which filtration is sought.

Regards.
Junaid

Vignesh Natarajan [Syncfusion]
Replied On November 28, 2019 10:24 AM UTC

Hi Junaid,  

Thanks for the update.  

Query: “I want to show a drop-down list for the filtration of ProjectId column rather than a textbox” 

We can achieve your requirement using FilterTemplate feature of EjsGrid. We have already documented this topic in our UG documentation. Kindly refer the below document for your reference 



Please get back to us if you have further queries.   

Regards, 
Vignesh Natarajan. 


Junaid
Replied On November 28, 2019 11:54 AM UTC

Thank you so much.

Regards.
Junaid

Vignesh Natarajan [Syncfusion]
Replied On November 29, 2019 03:46 AM UTC

Hi Junaid,  

Thanks for the update.  

We are glad to hear that your query has been resolved by our solution. 

Please get back to us if you have further queries. 

Regards, 
Vignesh Natarajan.   



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