javascript - 下拉列表中的 Kendo 文本框

Question

可以在 Kendo 的下拉列表中创建文本框吗？当用户在列表中找不到他需要的内容时，应该有文本框来手动设置一些值。

下拉菜单:

@(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);
        }
    });

此下拉列表中的值取决于另一个下拉列表，我们在其中选择属性，然后此下拉列表将动态获取新数据。有人知道有什么解决办法吗？

Answer 1

好的，我解决了这个问题。解决方案是:当下拉过滤器上的元素不存在时，我可以写入字符串值并重定向到 AddNew 函数。无数据模板的 JavaScript:

<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 函数是获取小部件元素和我的值。如果用户确认，脚本将重定向到从 Controller 发送所需值的操作 - 来自模型的 ProductId、来自参数的值和来自第一个下拉列表的 attributeDefinitionId 值:

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();
    }
};   

在 Controller 中，我获取这些值并将它们插入数据库:

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();
    }

编辑

差点忘了，我还设置了 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);
        }
    });

谢谢大家的建议