时间戳

首页 > 解决方案 > 下拉列表中的剑道文本框

javascript - 下拉列表中的剑道文本框

问题描述

可以在 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);
        }
    });

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

标签： javascriptc#model-view-controllerkendo-ui

解决方案

好的，我解决了这个问题。解决方案是：当下拉过滤器上的元素不存在时，我可以写入我的字符串值并重定向到 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 函数是获取小部件元素和我的值。如果用户确认脚本将重定向到控制器发送所需值的操作 - 来自模型的 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);
        }
    });

谢谢大家的提示

推荐阅读