Question

我有一个Kendo下拉菜单，在表上执行远程查找。设置为仅在下拉列表扩展时才返回前50个结果，以免加载大量数据。搜索特定的匹配字词时会加载超出搜索结果的结果。

通过文本和值参数设置，初始保存的值显示确定。但是，一旦下拉列表扩展，该值就会被擦除。

我在下面整理了一个例子：

 <!DOCTYPE html>
    <html>
    <head>
        <base href="https://demos.telerik.com/kendo-ui/dropdownlist/remotedatasource">
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common-material.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.mobile.min.css" />
    
        <script src="https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>
        
    
    </head>
    <body>
    
            <div id="example">
                
                <div class="demo-section k-content">
                    <h4>Products</h4>
                    <input id="products" style="width: 100%" />
                </div>
    
                <script>
                    $(document).ready(function() {
                        $("#products").kendoDropDownList({
                            dataTextField: "ProductName",
                            dataValueField: "ProductID",
                            dataSource: {
                                transport: {
                                    read: {
                                        dataType: "jsonp",
                                        url: "https://demos.telerik.com/kendo-ui/service/Products",
                                    }
                                }
                            },
                            filter: "contains",
                            value: 500,
                            text: "Result Outside Of Initial Scope",
                            autoBind: false,
                            "optionLabel": "Please select ..." 
                        });
                    });
                </script>
    
            </div>
    
    </body>
    </html>

由于未返回初始值500（查询返回的结果不足80个结果），因此初始值被擦除了。

如何阻止值在展开时被擦除？

Answer 1

解决了。我需要使用“ requestEnd”事件：

<!DOCTYPE html>
    <html>
    <head>
        <base href="https://demos.telerik.com/kendo-ui/dropdownlist/remotedatasource">
        <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
        <title></title>
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.common-material.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.min.css" />
        <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.2.514/styles/kendo.material.mobile.min.css" />
    
        <script src="https://kendo.cdn.telerik.com/2019.2.514/js/jquery.min.js"></script>
        <script src="https://kendo.cdn.telerik.com/2019.2.514/js/kendo.all.min.js"></script>
        
    
    </head>
    <body>
    
            <div id="example">
                
                <div class="demo-section k-content">
                    <h4>Products</h4>
                    <input id="products" style="width: 100%" />
                </div>
    
                <script>
                    $(document).ready(function() {
                        $("#products").kendoDropDownList({
                            dataTextField: "ProductName",
                            dataValueField: "ProductID",
                            dataSource: {
                                transport: {
                                    read: {
                                        dataType: "jsonp",
                                        url: "https://demos.telerik.com/kendo-ui/service/Products",
                                    }
                                }
                            },
                            filter: "contains",
                            value: 500,
                            text: "Result Outside Of Initial Scope",
                            autoBind: false,
                            "optionLabel": "Please select ..." 
                        });
                      
                      $("#products").data("kendoDropDownList").dataSource.bind("requestEnd", function (e) {
                        
                        var add = true;

                        e.response.forEach(function (element) {

                            var exists = (element.Value == "500)");

                            if (exists) {

                                add = false;
                            }
                          
                        });


                        if (add) {

                          e.response.push({

                              ProductName: "Result Outside Of Initial Scope",
                              ProductID: "500"
                          });

                        } 
                        
                      });
                      
                      
                    });
                </script>
    
            </div>
    
    </body>
    </html>

Answer 2

请参考以下代码段：- ->处理打开和更改事件，将选定的文本和值保存到变量 ->处理关闭事件，将保存的值返回到下拉列表在这里，我们需要将其添加到数据源中，以便显示在下拉列表中

<div id="example">

    <div class="demo-section k-content">
        <h4>Products</h4>
        <input id="products" style="width: 100%" />
    </div>

    <script>
        $(document).ready(function() {
            var selectedValue = 500;
            var selectedText = 'PRODUCT 500';

            function getDropDownList() {
                var ddl= $("#products").data("kendoDropDownList");
                selectedValue = ddl.value();
                selectedText = ddl.text();
            };

            function setDropDownList() {
                var ddl= $("#products").data("kendoDropDownList");
                var dataItem = ddl.dataSource.get(selectedValue);
                if(dataItem == undefined){
                    ddl.dataSource.add({ ProductName: selectedText,  ProductID: selectedValue});
                }
                ddl.value(selectedValue)
            };

            $("#products").kendoDropDownList({
                dataTextField: "ProductName",
                dataValueField: "ProductID",
                dataSource: {
                    transport: {
                        read: {
                            dataType: "jsonp",
                            url: "https://demos.telerik.com/kendo-ui/service/Products",
                        }
                    },
                serverFiltering: true,
                schema: {
                        model: { id: "ProductID" }
                }
                },
                filter: "contains",
                value: selectedValue,
                text: selectedText,
                            change: getDropDownList,
                            close: setDropDownList,
                            open: getDropDownList,
                autoBind: false,
                "optionLabel": "Please select ..." 
            });
        });
    </script>
</div>

如果初始值不在返回的默认远程数据之外，则Kendo Dropdown初始值会丢失

2 个答案: