New to Telerik UI for ASP.NET MVC? Start a free 30-day trial
Cascade ComboBoxes Using Web API Service
Environment
| Product | ComboBox for Telerik UI for ASP.NET MVC |
| Product Version | Created with version 2024.4.1112 |
Description
How can I implement cascading ASP.NET MVC ComboBoxes that bind to Web API service?
Solution
The example below relies on the following key steps:
- Create the Web API service:
C#
public class SpecialtyController : ApiController
{
// GET api/Specialty
public IEnumerable<Specialty> Get(int typeId, string filterValue)
{
List<Specialty> specialty = new List<Specialty>();
specialty.Add(new Specialty { Name = "Test" + new Random().Next(1000).ToString(), Value = 1, TypeId = typeId });
specialty.Add(new Specialty { Name = "Test" + new Random().Next(1000).ToString(), Value = 2, TypeId = typeId });
specialty.Add(new Specialty { Name = "Test" + new Random().Next(1000).ToString(), Value = 3, TypeId = typeId });
specialty.Add(new Specialty { Name = "Test" + new Random().Next(1000).ToString(), Value = 4, TypeId = typeId });
if (!string.IsNullOrWhiteSpace(filterValue))
{
specialty = specialty.Where(s => s.Name.StartsWith(filterValue)).ToList();
}
return specialty.AsEnumerable();
}
}- Configure the ComboBox for Web API data binding:
Razor
@(Html.Kendo().ComboBox()
.Name("specialty")
.DataTextField("Name")
.DataValueField("Value")
.Filter(FilterType.StartsWith)
.DataSource(source => source
.Custom()
.ServerFiltering(true)
.Transport(transport => transport
.Read(read => read
.Url("/api/Specialty")
.DataType("json")
.Data("filterSpecialtyData")
)
)
)
.Enable(false)
.AutoBind(false)
.CascadeFrom("type")
.CascadeFromField("TypeId")
)
<script>
function filterSpecialtyData() {
return {
typeId: $("#type").val(),
filterValue: $("#specialty").data("kendoComboBox").input.val()
}
}
</script>You can refer to the ASP.NET MVC application in the UI for ASP.NET MVC Examples repository to review the complete example.