Introduction
Licensing
Knowledge Base
Knowledge Base / Cascading AutoComplete
New to Telerik UI for ASP.NET Core? Start a free 30-day trial

Cascading AutoComplete

Environment

ProductTelerik UI for ASP.NET Core AutoComplete
Progress Telerik UI for ASP.NET Core versionCreated with the 2023.2.718 version

Description

How can I implement a cascading Telerik UI for ASP.NET Core AutoComplete?

Solution

The following example consists of two AutoComplete editors that bind to Model properties - OrganizarionName and OrganizationNumber. When the user types the name of an organization in the first AutoComplete, if the searched name appears as an option and the user selects it, then the second AutoComplete is filtered automatically based on the selected option in the first one and the respective option (the organization number) is selected. Also, when the user types an organization number (the second AutoComplete), the organization name is selected automatically in the first AutoComplete editor.

  1. Define the two AutoCompletes bound to the Model properties and configure them to use server filtering.

    Razor
        @model OrganizatioViewModel

    <form id="exampleForm" class="k-form k-form-vertical" method="post">
        <label for="OrganizationID" class="k-form-label">Name:</label>
        @(Html.Kendo().AutoCompleteFor(m => m.OrganizationID)
            .DataTextField("Name")
            .Filter("contains")
            .MinLength(1)                            
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetOrganizations", "Home");
                })
                .ServerFiltering(true);
            })
        )
              
        <label asp-for="OrganizationNumber" class="form-label">Number:</label>
        @(Html.Kendo().AutoCompleteFor(m => m.OrganizationNumber)
            .DataTextField("Number")
            .Filter("contains")
            .MinLength(1)
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("GetOrganizationNumbers", "Home");
                })
                .ServerFiltering(true);
            })
        )
        <div class="k-form-buttons">
            <button class="k-button k-button-solid-primary k-button-solid k-button-md k-rounded-md" type="submit">Submit</button>
        </div>
    </form>

  2. Use the Data() method of the DataSource to pass the selected option of the AutoComplete through the Read request of the cascaded AutoComplete. For example, when the user selects an organization name (the first AutoComplete), the name will be sent to the server through the Read request of the OrganizationNumber AutoComplete.

    Razor
        @(Html.Kendo().AutoCompleteFor(m => m.OrganizationID)
        ...                         
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetOrganizations", "Home").Data("onAdditionalData1");
            })
            .ServerFiltering(true);
        })
    )

    @(Html.Kendo().AutoCompleteFor(m => m.OrganizationNumber)
        ...                         
        .DataSource(source =>
        {
            source.Read(read =>
            {
                read.Action("GetOrganizationNumbers", "Home").Data("onAdditionalData2");
            })
            .ServerFiltering(true);
        })
    )

  3. Filter the data server-side based on the selected AutoComplete option.

    C#
        public class HomeController : Controller
    {

        public async Task<JsonResult> GetOrganizations(string text, string Number)
        {
            var organizations = await _organizationsDataService.GetAsync();
            if (!string.IsNullOrEmpty(Number))
            {
                int organizationNumber = int.Parse(Number);
                var filteredData = organizations.Where(p => p.Number == organizationNumber).ToList();
                return Json(filteredData);
            }
            if (!string.IsNullOrEmpty(text))
            {
                var filteredData = organizations.Where(p => p.Name.ToLower().Contains(text.ToLower())).ToList();
                return Json(filteredData);
            }
            return Json(organizations);
        }

        public async Task<JsonResult> GetOrganizationNumbers(string text, string Name)
        {
            var organizations = await _organizationsDataService.GetAsync();
            if (!string.IsNullOrEmpty(Name))
            {
                var filteredData = organizations.Where(p => p.Name == Name).ToList();
                return Json(filteredData);
            }
            if (!string.IsNullOrEmpty(text))
            {
                int organizationNumber = int.Parse(text);
                var filteredData = organizations.Where(p => p.Number == intOrganizationNumber).ToList();
                return Json(filteredData);
            }
            return Json(organizations);
        }
    }

  4. Handle the Select event of each AutoComplete component and select the value in the other AutoComplete based on the selected option.

    Razor
        @(Html.Kendo().AutoCompleteFor(m => m.OrganizationID)
        .Events(ev => ev.Select("onSelectOrganizationName"))
        ...                         
    )

    @(Html.Kendo().AutoCompleteFor(m => m.OrganizationNumber)
        .Events(ev => ev.Select("onSelectOrganizationNumber"))
        ...                         
    )

More ASP.NET Core Grid Resources

See Also

In this article
EnvironmentDescriptionSolutionMore ASP.NET Core Grid ResourcesSee Also
Not finding the help you need?
Contact Support