Blazor Cascading Dropdownlist Sample

[Chris]

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]

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: 

http://www.syncfusion.com/downloads/support/forum/145133/ze/WebApplication1-1807747427   

 

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]

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

[Berly Christopher]

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]

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]

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. 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication31522684417 

  

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]

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]

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(); 

        } 

            ….. 

} 

 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication31895365051 

 

Nuget Package: https://www.nuget.org/packages/Syncfusion.EJ2.Blazor/17.2.0.30-beta 

 

Release Notes:  https://ej2.syncfusion.com/aspnet-core-blazor/documentation/release-notes/17.2.28/#common 

 

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]

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(); 

        } 

            ….. 

} 

 

 

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication31895365051 

 

Nuget Package: https://www.nuget.org/packages/Syncfusion.EJ2.Blazor/17.2.0.30-beta 

 

Release Notes:  https://ej2.syncfusion.com/aspnet-core-blazor/documentation/release-notes/17.2.28/#common 

 

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]

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 

 

https://www.syncfusion.com/downloads/support/forum/145133/ze/BlazorApp5-2124980623 

 

 

Could you please check the above sample and get back to us if you need further assistance on this? 

 

Regards, 

Saranya D 

[Dan]

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