Kendo Dropdown initial value теряется, если начальное значение находится за пределами возвращаемых данных по умолчанию - PullRequest
Новая
       15

Kendo Dropdown initial value теряется, если начальное значение находится за пределами возвращаемых данных по умолчанию

0 голосов
/ 15 мая 2019

У меня есть раскрывающийся список 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 результатов), начальное значение стирается.

Как сделатьЯ остановлюсь, чтобы значение было уничтожено при расширении?

Ответы [ 2 ]

1 голос
/ 20 мая 2019

сработало. Мне нужно использовать событие 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>
0 голосов
/ 16 мая 2019

Пожалуйста, обратитесь к фрагменту кода ниже: - -> Обработать события открытия и изменения для этого сохранить выбранный текст и значение в переменные -> Обработать события закрытия в этом наборе сохраненные значения обратно в раскрывающийся список Здесь нам нужнодобавить его в источник данных, чтобы он отображался в раскрывающемся списке 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...