New to Telerik UI for ASP.NET Core? Start a free 30-day trial
Adding an Item in a DropDownList
Environment
Product | Telerik UI for ASP.NET Core DropDownList |
Progress Telerik UI for ASP.NET Core version | Created 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
- Create a separate
Custom
DataSource and specify the action method for the.Create()
method. - Set the filter type for the DropDownList through the
.Filter()
. - Specify a
NoDataTemplate
which will display an add confirmation dialog. - Inside the template, create a button and attach a handler that passes both the widget
id
and inputvalue
. 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.