Cascading AutoComplete

Environment

Product	Telerik UI for ASP.NET MVC AutoComplete
Progress Telerik UI for ASP.NET MVC version	Created with the 2023.2.718 version

Description

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

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.

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

    @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>

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View(new OrganizatioViewModel());
        }

        public JsonResult GetOrganizations(string text)
        {
            var organizations = _organizationsDataService.GetData();
            if (!string.IsNullOrEmpty(text))
            {
                var filteredData = organizations.Where(p => p.Name.ToLower().Contains(text.ToLower())).ToList();
                return Json(filteredData, JsonRequestBehavior.AllowGet);
            }
            return Json(organizations, JsonRequestBehavior.AllowGet);
        }

        public JsonResult GetOrganizationNumbers(string text)
        {
            var organizations = _organizationsDataService.GetData();
            if (!string.IsNullOrEmpty(text))
            {
                int organizationNumber = int.Parse(text);
                var filteredData = organizations.Where(p => p.Number == intOrganizationNumber).ToList();
                return Json(filteredData, JsonRequestBehavior.AllowGet);
            }
            return Json(organizations, JsonRequestBehavior.AllowGet);
        }
    }

    public class OrganizatioViewModel
    {
        public int? OrganizationID { get; set; }
        public int? OrganizationNumber { get; set; }
    }

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.

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

    <script>
        function onAdditionalData1() {
            let selectedOrganizationNumber = $("#OrganizationNumber").data("kendoAutoComplete").value(); // Get the currently selected option of the OrganizationNumber AutoComplete, if any
            return {
                text: $("#OrganizationID").val(), // Pass the search entry of the AutoComplete (the ServerFiltering() is enabled).
                Number: selectedOrganizationNumber != null ? selectedOrganizationNumber : "" // Pass the selected OrganizationNumber to the server
            };
        }
        function onAdditionalData2() {
            let selectedOrganization = $("#OrganizationID").data("kendoAutoComplete").value();
            return {
                text: $("#OrganizationNumber").val(),
                Name: selectedOrganization != null ? selectedOrganization : "" // Pass the selected OrganizationName to the server.
            };
        }
    </script>

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

    public class HomeController : Controller
    {

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

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

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

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

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

    <script>
        function onSelectOrganizationName(e) {
            let selectedOption = e.sender.value(); // Get the selected organization name.
            var organizationNumbersControl = $("#OrganizationNumber").data("kendoAutoComplete"); // Get a reference to the 2nd AutoComplete that holds the organization number.
            setTimeout(function () {
                if (selectedOption != null && organizationNumbersControl.value() != selectedOption) {
                    organizationNumbersControl.dataSource.fetch(function () { // Make a request to the server to get the Organization numbers data
                        let data = this.data(); // The server returns the filtered data.
                        if (data.length == 1) {
                            organizationNumbersControl.value(data[0].Number); // Set the organization number value.
                            organizationNumbersControl.trigger("change");
                        }
                    });
                }
            }, 100);
        }

        function onSelectOrganizationNumber(e) {
            let selectedOption = e.sender.value();
            var organizationNamesControl = $("#OrganizationID").data("kendoAutoComplete");
            setTimeout(function () {
                if (selectedOption != null && organizationNamesControl.value() != selectedOption) {
                    organizationNamesControl.dataSource.fetch(function () {
                        let data = this.data();
                        if (data.length == 1) {
                            organizationNamesControl.value(data[0].Name);
                            organizationNamesControl.trigger("change");
                        }
                    });
                }
            }, 100);
        }
    </script>

Cascading AutoComplete

Environment

Description

Solution

More ASP.NET MVC Grid Resources

See Also

Getting Started

Support Resources

Community