Kendo textbox within dropdownlist

Question

is possible to make textbox within the dropdownlist from Kendo? When user won't find on list what he needs, there should be textbox to set manually some value.

dropdown:

@(Html.Kendo().DropDownList()
.Name("Id")
.DataTextField("StringValue")
.DataValueField("Id")
.SelectedIndex(0))

javascript:

$('#AttributeValue_Id').kendoDropDownList({
        dataSource: dataSource,
        dataTextField: "Text",
        dataValueField: "Value",
        optionLabel: '@Html.Raw(T("Product.Attribute.SelectValue"))',
        dataBound: function () {
            $('#AttributeValue_Id').data('kendoDropDownList').select(0);
        }
    });

Values in this dropdown depend on another dropdown, where we pick attribute and then this dropdown is getting new data dynamically. Somebody know any solution?

Answer 1

Kendo already have feature within Dropdownlist in case user unable to find his choice option. He can add new element manually in dropdownlist. Please find link below

https://demos.telerik.com/kendo-ui/dropdownlist/addnewitem

Answer 2

Might be late for an answer but kendo dropdownlist supports contains filter for exactly this workflow.

<%= Html.Kendo().DropDownList()
    .Name("DropDownList")
    .Filter(FilterType.Contains);
%>

Ref: Kendo UI Dropdownlist API

Answer 3

Ok I solved this issue. Solution is: when the element on dropdown filter is not exist, I can write my string value and redirect to AddNew function. Javascript for no data template:

<script id="noDataTemplate" type="text/x-kendo-tmpl">
<div>
    Didn't find the element
</div>
<br />
<button class="k-button" onclick="addNew('#: instance.element[0].id #', '#: instance.filterInput.val() #')">Add new value</button>

AddNew function is get widget element and my value. If user will confirm the script will redirect to action from controller sending needed values - productId from Model, value from parameter and attributeDefinitionId value from first dropdown:

function addNew(widgetId, value) {
    var widget = $("#" + widgetId).getKendoDropDownList();
    var attributeDefinition = $('#AttributeDefinition').data('kendoDropDownList').value();
    var dataSource = widget.dataSource;

    if (confirm("Are you sure?")) {
        $.ajax({
            url: '@Url.Action("AddAttributeValue", "Product")' + '?productId=@Model.Id' + '&value=' + value + '&attributeDefinition=' + attributeDefinition,
            cache: false,
        }).done(function () {
            var grid = $("#attributesGrid").data("kendoGrid");
            grid.dataSource.read();
        });

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

        dataSource.sync();
    }
};   

In controller I'm getting these values and insert them to database:

public ActionResult AddAttributeValue(int productId, string value, int attributeDefinition)
    {

        if (value != null)
        {
            try
            {
                var model = attributeValueRepository.Insert(new ProductAttributeValue()
                {
                    IsCustom = true,
                    StringValue = value,
                    AttributeDefinitionId = attributeDefinition,
                });

                productAttributeRepository.Insert(new ProductAttribute()
                {
                    AttributeValueId = model.Id,
                    ProductId = productId
                });
            } catch
            {
                AddErrorFlashMessage(T("Product.Attribute.AttributeValueError"));
                return BadRequest();
            }
        }

        return Ok();
    }

Edit

Almost forgot, I set also on dropDown noDataTemplate:

        $('#AttributeValue_Id').kendoDropDownList({
        dataSource: dataSource,
        dataTextField: "Text",
        dataValueField: "Value",
        optionLabel: '@Html.Raw(T("Product.Attribute.SelectValue"))',
        filter: "startswith",
        noDataTemplate: $("#noDataTemplate").html(),
        dataBound: function () {
            $('#AttributeValue_Id').data('kendoDropDownList').select(0);
        }
    });

Thanks everybody for the tips