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

Blazor Cascading Dropdownlist Sample

Thread ID:

Created:

Updated:

Platform:

Replies:

145133 Jun 8,2019 12:35 AM UTC Jan 21,2020 04:43 PM UTC Blazor 11
loading
Tags: Dropdown List
Chris
Asked On June 8, 2019 12:35 AM UTC

Does anyone have a sample Blazor page showing how to implement cascading dropdowns?

Here are my two dropdown lists. 

<EjsDropDownList ID="supplierDropDown"  DataSource="@supplierList.Model"   Fields="@dropDownFields"></EjsDropDownList>
<EjsDropDownList ID="supplierProductsDropDown"  DataSource="@supplierProductList.Model"   Fields="@dropDownFields"></EjsDropDownList>

When supplierDropDown is changed I want to filter the supplierProductsDropDown Data source @supplierProductList.Model for the new supplier.

I don't know how to capture the change event on supplierDropDown to filter the list? 

A sample Blazor page showing cascading dropdowns would be a great help.

Thanks in advance,

Chris




Berly Christopher [Syncfusion]
Replied On June 10, 2019 12:04 PM UTC

Hi Chris,  
Greetings from Syncfusion. 
We have noticed from the provided code example that you have bind the data source for every DropDownList. So, we have prepared the sample by bind the data source to the first DropDownList and bind another data source to the next dropdownlist in change event as mentioned in the below code example. 
  
<EjsDropDownList ref="ddlSupplier" ID="supplierDropDown" DataSource="@_supplierList.supList" Change="@onSupplierChange"> 
        <DropDownListFieldSettings Text="Name" Value="SID"></DropDownListFieldSettings> 
    </EjsDropDownList> 
    <EjsDropDownList ref="ddlProduct" ID="supplierProductsDropDown"> 
        <DropDownListFieldSettings Text="Name" Value="PID"></DropDownListFieldSettings>    </EjsDropDownList> 
  
@functions{ 
            EjsDropDownList ddlSupplier; 
            EjsDropDownList ddlProduct; 
            supplierList _supplierList = new supplierList(); 
            supplierProductList _supplierProductList = new supplierProductList(); 
  
    public void onSupplierChange(object args) 
            { 
                //Deserialized the change event args using Newton soft. 
                DropDownChangeArgs eventArgs = JsonConvert.DeserializeObject<DropDownChangeArgs>(args as string); 
                ddlProduct.Value = null; 
                //Filter the producted value based on suppliers 
                ddlProduct.DataSource = this._supplierProductList.supProdcutList.Where(item => item.SID == eventArgs.Value); 
                ddlProduct.DataBind(); 
            } 
        } 
  
Please find the sample from the below link. 
  
Sample Link: 
 
Also, we have fixed the issue to reflect the property changes to the component without using DataBind() method. This fix will be included in our today’s patch release. After that, there is no need to call DataBind() method as mentioned in the above code example. 
  
Regards, 
Berly B.C 



Chris
Replied On June 11, 2019 12:17 AM UTC

Thanks Berly for the great sample project. Top notch customer service. 

Berly Christopher [Syncfusion]
Replied On June 11, 2019 05:40 AM UTC

Hi Chris, 
  
 
Most welcome and thank you for your valuable feedback. We are glad to help you. Let us know if you need any further assistance. 
  
Regards, 
Berly B.C 


Ryan Richards
Replied On June 26, 2019 05:03 PM UTC

Hello, 

When I run this example I get the following error. 

InvalidOperationException: Object of type 'Syncfusion.EJ2.RazorComponents.DropDowns.EjsDropDownList' does not have a property matching the name 'ref'.

Am I missing something? I would love to have this working so simply as it is in the example. 

Thanks, 
Ryan 


Berly Christopher [Syncfusion]
Replied On June 27, 2019 09:58 AM UTC

Hi Ryan,   
  
We have provided the property binding support for our Syncfusion Blazor components in the product version V17.1.52-beta. So, there is no need to use "ref" for our component to take the reference. We suggest you to define the property binding for the Value property as mentioned in the below code example to achieve your requirement. 
  
 
[index.razor
  
<EjsDropDownList ID="supplierDropDown" DataSource="@supplierList.supSupplierList" Change="@OnSupplierChange"> 
    <DropDownListFieldSettings Text="Name" Value="SID"></DropDownListFieldSettings> 
</EjsDropDownList> 
<EjsDropDownList ID="supplierProductsDropDown" DataSource="@supplierProductList.supProductList" Value=@value Enabled="@enabled" Query="@query"> 
    <DropDownListFieldSettings Text="Name" Value="PID"></DropDownListFieldSettings> 
</EjsDropDownList> 
@code{ 
    SupplierList supplierList =new SupplierList(); 
    SupplierProductList supplierProductList=new SupplierProductList(); 
    public string query = null; 
    public bool enabled = false; 
    public string value= null; 
    public void OnSupplierChange(ChangeEventArgs eventArgs) 
    { 
        this.value=null; 
        this.enabled = true; 
        this.query = "new ej.data.Query().select(['Name', 'SID', 'PID']).where('SID', 'equal', "+eventArgs.Value+")"; 
        this.StateHasChanged(); 
    } 
} 
   
  
Please find the sample from below link. 
  

Note: We have prepared the sample using latest version 17.1.53-beta with .NET Core SDK version 3.0.0-Preview6. So, we suggest you to upgrade the SDK to preview6 in your application to run the sample without any issues. 
 
  
Regards, 
Berly B.C 


Ryan Richards
Replied On July 11, 2019 11:09 PM UTC

Since I updated VS this no longer works. It just shows two input boxes. 
Is there something I need to change to make it work again? 


Thanks, 
Ryan 

Gopi Govindasamy [Syncfusion]
Replied On July 12, 2019 06:22 AM UTC

Hi Ryan,   
 
This problem happened because we changed the name of the nuget package name RazorComponents to Blazor. So, we suggest you to upgrade the latest nuget in your application to run the sample without any issues and change the package name to @using Syncfusion.EJ2.Blazor on your import.razor page, alter the event name to ValueChange . Please find the code snippet and sample below 
 
  <EjsDropDownList ID = "supplierDropDown" DataSource="@supplierList.supSupplierList" ValueChange="@OnSupplierChange"> 
    <DropDownListFieldSettings Text = "Name" Value="SID"></DropDownListFieldSettings > 
</EjsDropDownList > 
<EjsDropDownList ID = "supplierProductsDropDown" DataSource="@supplierProductList.supProductList" Value=@Value Enabled = "@Enabled" Query="@Query"> 
     <DropDownListFieldSettings Text = "Name" Value="PID"></DropDownListFieldSettings > 
</EjsDropDownList> 
@code{ 
    SupplierList supplierList = new SupplierList(); 
        SupplierProductList supplierProductList = new SupplierProductList(); 
        public string Query { get; set; } = null; 
        public bool Enabled { get; set; } = false; 
        public string Value { get; set; } = null; 
        public void OnSupplierChange(@Syncfusion.EJ2.Blazor.DropDowns.ChangeEventArgs eventArgs) 
        { 
            this.Value = null; 
            this.Enabled = true; 
            this.Query = "new ej.data.Query().select(['Name', 'SID', 'PID']).where('SID', 'equal', " + eventArgs.Value + ")"; 
            this.StateHasChanged(); 
        } 
            ….. 
 
 
 
 
 
Note: We have prepared the sample using latest version 17.2.0.30-beta with .NET Core SDK version 3.0.0-Preview6.  
 
Regards, 
Gopi G. 


Jonathan Nordell
Replied On December 11, 2019 05:16 PM UTC

Hi Ryan,   
 
This problem happened because we changed the name of the nuget package name RazorComponents to Blazor. So, we suggest you to upgrade the latest nuget in your application to run the sample without any issues and change the package name to @using Syncfusion.EJ2.Blazor on your import.razor page, alter the event name to ValueChange . Please find the code snippet and sample below 
 
  <EjsDropDownList ID = "supplierDropDown" DataSource="@supplierList.supSupplierList" ValueChange="@OnSupplierChange"> 
    <DropDownListFieldSettings Text = "Name" Value="SID"></DropDownListFieldSettings > 
</EjsDropDownList > 
<EjsDropDownList ID = "supplierProductsDropDown" DataSource="@supplierProductList.supProductList" Value=@Value Enabled = "@Enabled" Query="@Query"> 
     <DropDownListFieldSettings Text = "Name" Value="PID"></DropDownListFieldSettings > 
</EjsDropDownList> 
@code{ 
    SupplierList supplierList = new SupplierList(); 
        SupplierProductList supplierProductList = new SupplierProductList(); 
        public string Query { get; set; } = null; 
        public bool Enabled { get; set; } = false; 
        public string Value { get; set; } = null; 
        public void OnSupplierChange(@Syncfusion.EJ2.Blazor.DropDowns.ChangeEventArgs eventArgs) 
        { 
            this.Value = null; 
            this.Enabled = true; 
            this.Query = "new ej.data.Query().select(['Name', 'SID', 'PID']).where('SID', 'equal', " + eventArgs.Value + ")"; 
            this.StateHasChanged(); 
        } 
            ….. 
 
 
 
 
 
Note: We have prepared the sample using latest version 17.2.0.30-beta with .NET Core SDK version 3.0.0-Preview6.  
 
Regards, 
Gopi G. 


I'm unable to get this example to work in 17.3.0.29.  I get an error that Syncfusion.EJ2.Blazor.DropDowns.ChangeEventArgs requires a type and when I enter a type I get an error "Error cannot convert from 'method group' to 'EventCallback'".

Saranya Dhayalan [Syncfusion]
Replied On December 12, 2019 07:31 AM UTC

Hi Ryan, 
 
Thanks for the update 
 
We have checked your reported issue, we would like to let you know that the events should be provided to the DropDowList using DropDownListEvents component. When using events of DropDowList, TValue must be provided in the DropDownListEvents component. Please find the below code snippet: 
 
 
@using Syncfusion.EJ2.Blazor.DropDowns 
 
<EjsDropDownList ID="supplierDropDown" TValue="string" DataSource="@supplierList.supSupplierList"> 
    <DropDownListEvents TValue="string" ValueChange="@OnSupplierChange"></DropDownListEvents> 
    <DropDownListFieldSettings Text="Name" Value="SID"></DropDownListFieldSettings> 
</EjsDropDownList> 
 
<EjsDropDownList ID="supplierProductsDropDown" DataSource="@supplierProductList.supProductList" Value=@Value Enabled="@Enabled" Query="@Query"> 
    <DropDownListFieldSettings Text="Name" Value="PID"></DropDownListFieldSettings> 
</EjsDropDownList> 
 
 
@code{ 
  public void OnSupplierChange(Syncfusion.EJ2.Blazor.DropDowns.ChangeEventArgs<string> eventArgs) 
    { 
        this.Value = null; 
        this.Enabled = true; 
        this.Query = "new ej.data.Query().select(['Name', 'SID', 'PID']).where('SID', 'equal', " + eventArgs.Value + ")"; 
        this.StateHasChanged(); 
    } 
 
} 
 
 
_Host.cshtml 
 
<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/17.3.29/material.css" rel="stylesheet" /> 
<script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ej2.min.js"></script> 
<script src="https://cdn.syncfusion.com/ej2/17.3.29/dist/ejs.interop.min.js"></script> 
 
For your convenience, we have prepared a sample, please refers to the below sample link 
 
 
 
Could you please check the above sample and get back to us if you need further assistance on this? 
 
Regards, 
Saranya D 


Dan
Replied On January 20, 2020 11:21 PM UTC

If you download the latest sample and upgrade the NuGet package to 14.4.0.42. the sample becomes broken again:




Berly Christopher [Syncfusion]
Replied On January 21, 2020 04:43 PM UTC

Hi Chris, 
  
We have modified the sample with latest release version changes for DropDwonList component and attached it below.  
  
  
  
Regards, 
Berly B.C 


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