Adding Items in virtual DropDownList

[Yves]

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

@(Html.Kendo().DropDownListFor(model => model.SiSpaceDetailId)
        .DataTextField("SiSpaceId")
        .DataValueField("Id").Filter("contains")
        .Events(e => e.Change("onSiSpaceSelect").DataBound("onDatabound"))
        .DataSource(dataSource => dataSource.Custom()
            .ServerFiltering(true)
            .ServerPaging(true)
            .PageSize(80)
            .Type("aspnetmvc-ajax")
            .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;">
        <div>
            Add - '#: data.filterInput.val() #' ?
        </div>
        <br />
        <button class="k-primary" onclick="addNew('#: data.element[0].id #', '#: data.filterInput.val() #')">Add</button>
    </div>
</script>

And the JS looks like this: 

onDatabound: function() {
    var data = $("#siSpaceId").data("kendoDropDownList");
    data.listView.content.find("#addNew").remove();
    if (data.dataSource.view().length === 0) {
        var template = kendo.template($("#noDataTemplate").html());
        data.listView.content.append(template(data));
        $("#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)) {
        dataSource.add({
            Id: emptyGuid,
            SiSpaceId: value
        });

        dataSource.one("sync",
            function() {
                widget.select(dataSource.view().length - 1);
            });

        dataSource.sync();
    }
}

 

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?

[Nencho]

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:

http://docs.telerik.com/kendo-ui/controls/editors/combobox/virtualization#known-limitations

Regards,
Nencho
Progress Telerik