New to Telerik UI for ASP.NET MVCStart a free 30-day trial

Cascade ComboBoxes Using Web API Service

Environment

ProductComboBox for Telerik UI for ASP.NET MVC
Product VersionCreated 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:

  1. 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();
        }
    }
  1. 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.

More ASP.NET MVC ComboBox Resources

See Also