New to Telerik UI for ASP.NET Core? Download free 30-day trial

Adding an Item in a DropDownList


Product Telerik UI for ASP.NET Core DropDownList
Progress Telerik UI for ASP.NET Core version Created with the 2022.2.510 version


How can I add a new item if it doesn't exist when working with the Telerik UI for ASP.NET Core DropDownList?


  1. Create a separate Custom DataSource and specify the action method for the .Create() method.
  2. Set the filter type for the DropDownList through the .Filter().
  3. Specify a NoDataTemplate which will display an add confirmation dialog.
  4. Inside the template, create a button and attach a handler that passes both the widget id and input value.
  5. Sync the data to update the records.
    @using Telerik.Examples.Mvc.Models

            .Read(read => read.Action("GetLocations", "AddItem"))
            .Create(create => create.Action("CreateLocation", "AddItem"))

        .HtmlAttributes(new { style = "width: 100%" })
    public class AddItemController : Controller
        public IActionResult AddItem()
            return View("~/Views/DropDownList/AddItem.cshtml");
        public IActionResult GetLocations()
            IEnumerable<Location> locations = LocationsData();

            return Json(locations);
        public IActionResult CreateLocation(Location location)
            return Json(new[] { location });
        private List<Location> LocationsData()
            return new List<Location>()
                new Location() { Id = 1, Name = "London" },
                new Location() { Id = 2, Name = "Paris" },
                new Location() { Id = 3, Name = "Sofia" }
    <script id="noDataTemplate" type="text/x-kendo-tmpl">
        <button class="k-button k-button-solid k-button-md k-rounded-md k-button-solid-base" onclick="addNew('#: instance.element[0].   id #', '#: instance.filterInput.val() #')">Add new item</button>

        function addNew(widgetId, value) {
            var widget = $("#" + widgetId).getKendoDropDownList(); //get the reference of the dropdownlist
            var dataSource = widget.dataSource;
            if (confirm("Are you sure?")) {
                dataSource.add({ //add a new item to the datasource
                    Id: 0,
                    Name: value
      "sync", function () {
           - 1);
                dataSource.sync(); //sync the data

For the complete implementation of the suggested approach, refer to this GitHub Project.

More ASP.NET Core DropDownList Resources

See Also

In this article