Adding Items in virtual DropDownList

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

    Posted 11 Jul Link to this post

    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?

  2. Answer
    Nencho
    Admin
    Nencho avatar
    1671 posts

    Posted 13 Jul 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:

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


    Regards,
    Nencho
    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