修改

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函数是获取widget元素和我的值。如果用户确认脚本将重定向到控制器发送所需值的操作 - 来自Model的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();
    }
};

在控制器中我获取这些值并将它们插入数据库：

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

感谢大家的提示

下拉列表中的Kendo文本框

1 个答案:

修改