下拉列表中的剑道文本框

Posted 2023-05-07

【中文标题】下拉列表中的剑道文本框

【英文标题】：Kendo textbox within dropdownlist

【发布时间】：2018-11-17 09:19:39

【问题描述】：

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

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

【问题讨论】：

你能不能不使用自动完成，而只是从中获取价值？ demos.telerik.com/aspnet-mvc/autocomplete 或组合框 demos.telerik.com/aspnet-mvc/combobox

我正在尝试这样做：demos.telerik.com/kendo-ui/dropdownlist/addnewitem 我正在获得带有“添加新值”的按钮，但我不知道如何根据需要更改此代码。单击此按钮后，我需要重定向以从控制器添加操作。无论如何，当我使用此代码时， $(document).ready 会破坏另一个 javascripts。有人可以解释一下怎么做吗？

您发送的链接是对下拉列表的纯 jQuery 编辑，而不是您使用的 asp.net mvc 版本。我相信你可以破解一个方法（这通常是剑道的情况），但或者你可以使用像自动完成这样简单的东西，并在提交表单时将其保存到数据源中（如果你是这样做是为了重复使用）。

demos.telerik.com/aspnet-mvc/dropdownlist

没有现成可用的代码。您必须根据自己的需要进行定制。这可能会帮助你。 telerik.com/forums/…

【参考方案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 函数是获取小部件元素和我的值。如果用户确认脚本将重定向到控制器发送所需值的操作 - 来自模型的 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);
        
    );

感谢大家的建议

【参考方案2】：

答案可能会迟到，但 kendo 下拉列表支持 contains 过滤器，正是这个工作流程。

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

参考：Kendo UI Dropdownlist API

【参考方案3】：

Kendo 已经在下拉列表中提供了功能，以防用户找不到他的选择选项。他可以在下拉列表中手动添加新元素。请在下面找到链接

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