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

Adding an Item in a DropDownList

Environment

ProductTelerik UI for ASP.NET Core DropDownList
Progress Telerik UI for ASP.NET Core versionCreated with the 2022.2.510 version

Description

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

Solution

  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.
Index.cshtml
    @using Telerik.Examples.Mvc.Models

    @(Html.Kendo().DataSource<Location>()
        .Name("customDataSource")
        .Custom(c=>c
        .Transport(transport=>transport
            .Read(read => read.Action("GetLocations", "AddItem"))
            .Create(create => create.Action("CreateLocation", "AddItem"))
         )
        .Schema(s=>s
            .Model(m=>
            {
                m.Id("Id");
                m.Field(f=>f.Id);
                m.Field(f=>f.Name);
            })
         )
        )
    )

    @(Html.Kendo().DropDownList()
        .Name("dropDownList")
        .DataTextField("Name")
        .DataValueField("Id")
        .NoDataTemplateId("noDataTemplate")
        .Filter(FilterType.StartsWith)
        .DataSource("customDataSource")
        .HtmlAttributes(new { style = "width: 100%" })
    )

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

More ASP.NET Core DropDownList Resources

See Also