1. Home
  2. Forum
  3. Blazor
  4. Cascading DropDown Not Getting Cleared and Working Wrong in 18.1.36-beta version

Cascading DropDown Not Getting Cleared and Working Wrong in 18.1.36-beta version

Hi,
 Currently In my project I am using 18.1.36-beta version. In this I am using Cascading dropdown functionality in blazor component. 
 In my component  I have 3 dropdown i.e ProductGroup ,Format,Category and this dropdown depend upon each other .The cascading flow is
 ProductGroup ->Format->Category. so In my project this cascading works correctly but the problem is dropdown not getting proper cleared.
For Example .
In Product Group I have option 'Abc','Xyz' and if I select  'Abc' then Format dropdown gets correct value if I select any of value from format i.e lets consider 'mnp' and if I change
value from 'Abc' to 'Xyz' then Format dropdown selected value and list gets cleared but if I again select the Productgroup as 'Abc then in Format dropdown that previous selected 'mnp' value automatically get selected it means selected value not getting cleared same condition occurred when I explictly clears the dropdown value  on button click.I have provided below code for reference.


DropDown Code:
ProductGroup:
   <SfDropDownList  CssClass="DDlborder" TItem="ddlOption" TValue="string" Placeholder="Select Product Group" PopupHeight="auto" @bind-    value="@ProductGroupId" DataSource="@productGroups">
                    <DropDownListEvents TValue="string" ValueChange="onChangeProductGroup"></DropDownListEvents>
                    <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
  </SfDropDownList>

Format:
<SfDropDownList  CssClass="DDlborder" TItem="ddlOption" TValue="string" Placeholder="Select Format" PopupHeight="auto" @bind-value="@FormatId" DataSource="@formats">
                    <DropDownListEvents TValue="string" ValueChange="onChangeFormat"></DropDownListEvents>
                    <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
 </SfDropDownList>

Category:

  <SfDropDownList  CssClass="DDlborder" TItem="ddlOption" TValue="string" Placeholder="Select Category" PopupHeight="auto" @bind-value="@CategoryId" DataSource="@categories">
                    <DropDownListEvents TValue="string" ValueChange="onChangeCategory"></DropDownListEvents>
                    <DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
 </SfDropDownList>

Code Part:
@code {

    private string ProductGroupId { get; set; }
    private string FormatId { get; set; }
    private string CategoryId { get; set; }

    public List<ddlOption> productGroups { get; set; } = new List<ddlOption>();
    public List<ddlOption> formats { get; set; } = new List<ddlOption>();
    public List<ddlOption> categories { get; set; } = new List<ddlOption>();


  protected override async Task OnInitializedAsync()
    {
        
        productGroup = await ProductGroupService.GetAllAsync();
    }


 private async Task onChangeProductGroup(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args)
    {
        this.CategoryId = null;
        this.FormatId = null;

        formats = new List<ddlOption>();
        if (args.Value != "" && args.Value != null)
        {
            var formatslist = await FormatService.GetFilteredAsync(filter);
            formats = formatslist.Select(x => new ddlOption { Text = x.Description, Value = x.Id.ToString() }).ToList();

        }
        this.StateHasChanged();
    }

    /// <summary>
    /// Dropdown Cascade
    /// </summary>
    private async Task onChangeFormat(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string> args)
    {
        categories = new List<ddlOption>();
        if (args.Value != "" && args.Value != null)
        {
            var Categorylist = await CategoryService.GetFilteredAsync(filter);
            categories = Categorylist.Select(x => new ddlOption { Text = x.Description, Value = x.Id.ToString() }).ToList();
            this.CategoryId = null;
        }
        this.StateHasChanged();
    }


 

3 Replies
SN Sevvandhi Nagulan Syncfusion Team April 7, 2020 12:08 PM UTC

Hi Ashwini, 

Greetings from Syncfusion support. 

We checked the reported requirement.  While changing the value First dropdown ,then second dropdown value clears correctly in our end. Based on the provided code snippet we have prepared the sample with 3 Dropdownlist. Please refer the below sample 



Also, In the provided code snippet you have binded the same class and same fields to the all the DropDownList. So can you please provide the  below details that will help us to check and prompt solution in our end. 

  1. Issue reproducing sample
  2. Or share the Json data of 3 dropdownlist  and class
  3. Or provide the Json data of services that you are stored in the formatslist, productGroup and Categorylist

Regards, 
Sevvandhi N 


AS Ashwini Shilvant April 8, 2020 04:33 PM UTC

Hi Sevvandhi,

The class ddloption contain Text and Id Property and this class I want to use to multiple dropdowlist that's why I used it multiple times.
 
Below I have provided  Code in this a small change I have made all bind value changed from string to int?.

so Please check On dropdown change it's corresponding cascading dropdown list and value not getting cleared.

and On Reset button click dropdown selected value not set to null.


Attachment: BlazorApp1_f4566a17.rar

SN Sevvandhi Nagulan Syncfusion Team April 9, 2020 07:12 AM UTC

Hi Ashwini, 

Thanks for the update. 

We checked the shared sample. The cause of the issue is you are referred the scripts in the host.cshtml page.  In the latest version, we removed the referring of scripts(interop and min) in the host.cshtml page. Also, you have used the TValue as int?. If so, then you should the field’s value property type also int?. But in the sample , you were used the field’s value property as string. We modified the sample for you reference.  Please find the sample below, 



Please find the breaking changes in this release from the below release notes 


Regards, 
Sevvandhi N 


Loader.
Up arrow icon