Adding Items in virtual DropDownList

2 posts, 1 answers
  1. Yves
    Yves avatar
    1 posts
    Member since:
    Jul 2017

    Posted 11 Jul 2017 Link to this post

    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?

  2. Answer
    Nencho avatar
    1725 posts

    Posted 13 Jul 2017 Link to this post

    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.
Back to Top