This is a migrated thread and some comments may be shown as answers.

Adding Items in virtual DropDownList

1 Answer 123 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Yves asked on 11 Jul 2017, 12:19 PM

We want to add a new item locally to a virtual DropDownList. 

@(Html.Kendo().DropDownListFor(model => model.SiSpaceDetailId)
        .Events(e => e.Change("onSiSpaceSelect").DataBound("onDatabound"))
        .DataSource(dataSource => dataSource.Custom()
            .Transport(tr => tr.Read(read => read.Action("GetSiSpaceIds", "Controller")
        .Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
        .HtmlAttributes(new { Id = "siSpaceId", IsSingleSelection = true })
        .Template("<span>#: data.SiSpaceId #</span> <a style=\"float: right\" href='javascript:deleteSiSpaceDialog(\"#: data.Id #\")'> Delete </a>")

The add is all standard: 

<script id="noDataTemplate" type="text/x-kendo-tmpl">
    <div id="addNew" style="padding: 10px;">
            Add - '#: data.filterInput.val() #' ?
        <br />
        <button class="k-primary" onclick="addNew('#: data.element[0].id #', '#: data.filterInput.val() #')">Add</button>

And the JS looks like this: 

onDatabound: function() {
    var data = $("#siSpaceId").data("kendoDropDownList");
    if (data.dataSource.view().length === 0) {
        var template = kendo.template($("#noDataTemplate").html());
        $("#addNew").parent().css("height", "auto"); //height is set to 0 for some reason, this is a workaround
addNew: function(widgetId, value) {
    var widget = $("#" + widgetId).getKendoDropDownList();
    var dataSource = widget.dataSource;
    if (confirm(alert.areYouSure)) {
            Id: emptyGuid,
            SiSpaceId: value
            function() {
       - 1);


If the Id is an empty Guid, we are adding it on submit. Since adding the virtualization for better performance the add stopped working. 

Can you post any working example?

1 Answer, 1 is accepted

Sort by
Telerik team
answered on 13 Jul 2017, 07:35 AM
Hello Yves,

I am afraid that dynamically changing the dataSources (which is needed for the Add Item functionality) of virtualized DropDown is a not supported scenario. This is described in the last bullet of the limitation section in the following documentation article:

Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Asked by
Top achievements
Rank 1
Answers by
Telerik team
Share this question