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.
I need to implement a cascading dropdown list in my application, I followed your examples (Web Api, datasource , etc) but none of them worked, the change event fires but does nothing.
I finally decided to put all the code of one of your examples to validate what I was doing wrong, and I was surprised that this doesn't work inside the grid edition template either.
I tried it on a page and it works.
The code:
@using Syncfusion.Blazor.DropDowns
@using Syncfusion.Blazor.Data
<GridEditSettings AllowAdding="true" AllowDeleting="true" AllowEditing="true" Mode="EditMode.Dialog" >
<HeaderTemplate >
<h2 ><strong>@Titulo</strong></h2>
</HeaderTemplate>
<Template>
<div class="col-lg-12 control-section">
<div class="control-wrapper">
<div class="cascading">
<label class="example-label">Country</label>
<SfDropDownList TItem="Countries" TValue="string" Placeholder="Select a country" PopupHeight="auto" DataSource="@Country">
<DropDownListEvents TItem="Countries" TValue="string" ValueChange="ChangeCountry"></DropDownListEvents>
<DropDownListFieldSettings Text="CountryName" Value="CountryId"></DropDownListFieldSettings>
</SfDropDownList>
</div>
<div class="cascading">
<label class="example-label">State</label>
<SfDropDownList Enabled="@EnableStateDropDown" TValue="string" TItem="State" @bind-Value="@StateValue" Placeholder="Select a state" Query="@StateQuery" PopupHeight="auto" DataSource="@States">
<DropDownListEvents TItem="State" TValue="string" ValueChange="ChangeState"></DropDownListEvents>
<DropDownListFieldSettings Text="StateName" Value="StateId"></DropDownListFieldSettings>
</SfDropDownList>
</div>
<div class="cascading">
<label class="example-label">City</label>
<SfDropDownList Enabled="@EnableCitytDropDown" TValue="string" TItem="city" @bind-Value="@CityValue" Placeholder="Select a city" Query="@CityQuery" PopupHeight="auto" DataSource="@cites">
<DropDownListFieldSettings Text="CityName" Value="CityId"></DropDownListFieldSettings>
</SfDropDownList>
</div>
</div>
</div>
</Template>
<FooterTemplate>
</FooterTemplate>
</GridEditSettings>
<style>
.control-wrapper {
max-width: 250px;
margin: 0 auto;
padding: 10px 0px 0px;
}
.example-label {
font-size: 14px;
margin-bottom: 6px;
}
.control-wrapper .cascading {
padding: 30px 0px 0px;
}
</style>
@code {
public bool EnableStateDropDown = false;
public bool EnableCitytDropDown = false;
public string StateValue { get; set; } = null;
public Query StateQuery { get; set; } = null;
public string CityValue { get; set; } = null;
public Query CityQuery { get; set; } = null;
public void ChangeCountry(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, Countries> args)
{
this.EnableStateDropDown = !string.IsNullOrEmpty(args.Value);
this.EnableCitytDropDown = false;
this.StateQuery = new Query().Where(new WhereFilter() { Field = "CountryId", Operator = "equal", value = args.Value, IgnoreCase = false, IgnoreAccent = false });
this.StateValue = null;
this.CityValue = null;
}
public void ChangeState(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, State> args)
{
this.EnableCitytDropDown = !string.IsNullOrEmpty(args.Value);
this.CityQuery = new Query().Where(new WhereFilter() { Field = "StateId", Operator = "equal", value = args.Value, IgnoreCase = false, IgnoreAccent = false });
this.CityValue = null;
}
public class State
{
public string StateName { get; set; }
public string CountryId { get; set; }
public string StateId { get; set; }
}
public class Countries
{
public string CountryName { get; set; }
public string CountryId { get; set; }
}
public class city
{
public string CityName { get; set; }
public string StateId { get; set; }
public string CityId { get; set; }
}
public List<Countries> Country = new List<Countries>() {
new Countries(){ CountryName= "Australia", CountryId= "2" },
new Countries(){ CountryName= "United States", CountryId= "1" }
};
public List<State> States = new List<State>() {
new State() { StateName= "New York", CountryId= "1", StateId= "101" },
new State() { StateName= "Queensland", CountryId= "2", StateId= "104" },
new State() { StateName= "Tasmania ", CountryId= "2", StateId= "105" },
new State() { StateName= "Victoria", CountryId= "2", StateId= "106" },
new State() { StateName= "Virginia", CountryId= "1", StateId= "102" },
new State() { StateName= "Washington", CountryId= "1", StateId= "103" }
};
public List<city> cites = new List<city>()
{
new city() { CityName = "Aberdeen", StateId= "103", CityId= "207" },
new city() { CityName = "Albany", StateId= "101", CityId= "201" },
new city() { CityName = "Brisbane ", StateId="104", CityId= "211" },
new city() { CityName = "Colville ", StateId= "103", CityId= "208" },
new city() { CityName ="Emporia", StateId= "102", CityId= "206" },
new city() { CityName = "Hampton ", StateId= "102", CityId= "205" },
new city() { CityName ="Hobart", StateId= "105", CityId= "213" },
new city() { CityName ="Lockport", StateId= "101", CityId= "203" },
new city() { CityName = "Pasco", StateId= "103", CityId= "209" },
new city() { CityName= "Alexandria", StateId= "102", CityId= "204" },
new city() { CityName= "Beacon ", StateId= "101", CityId= "202" },
new city() { CityName= "Cairns", StateId= "104", CityId= "212" },
new city() { CityName= "Devonport", StateId= "105", CityId= "215" },
new city() { CityName= "Geelong", StateId= "106", CityId= "218" },
new city() { CityName= "Healesville ", StateId="106", CityId= "217" },
new city() { CityName= "Launceston ", StateId= "105", CityId= "214" },
new city() { CityName= "Melbourne", StateId= "106", CityId="216" },
new city() { CityName= "Townsville", StateId= "104", CityId= "210" }
};
}
