Неопределенные значения в выпадающем списке Kendo-ui - PullRequest
Новая
       22

Неопределенные значения в выпадающем списке Kendo-ui

0 голосов
/ 16 марта 2019

Я реализовал комбинированный список с помощью кендо, но при загрузке данных он всегда показывает undefine. Я использую событие открытия comboBox и загрузки данных вручную. Ниже приведен фрагмент кода. Так что мне не хватает чего-либо для загрузки данных? 

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
  
<input id="combobox" />
<script>
  var placeHolder="select..";
  var data=[];
$("#combobox").kendoComboBox({index: 0,
          minLength: 1,
          filter: "contains",
          dataTextField: "name",
          dataValueField: "id",
          ignoreCase: true,
          autoBind: false,
        	open: function(e){
            e.sender.dataSource.read()
          },
          dataSource: {
            data: [],
            autoSync: false,
            serverFiltering: true,
            transport: {
              read: function (o) {

                var dataResolve = [];

                
                  dataResolve.push("A");
                data=dataResolve;
                o.success(data);
              }
            }
          }
});
</script>
</body>
</html>

Ответы [ 2 ]

0 голосов
/ 18 марта 2019

Вы упомянули dateTextField как «Имя», а dateValueField как «Id», поэтому вам нужно будет присвоить имя с таким массивом, как этот. 

   dataResolve.push({name:"A", id: 1});

Попробуйте это: 

 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2019.1.220/styles/kendo.mobile.all.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2019.1.220/js/kendo.all.min.js"></script>
</head>
<body>
  
<input id="combobox" />
<script>
  var placeHolder="select..";
  var data=[];
$("#combobox").kendoComboBox({index: 0,
          minLength: 1,
          filter: "contains",
          dataTextField: "name",
          dataValueField: "id",
          ignoreCase: true,
          autoBind: false,
        	open: function(e){
            e.sender.dataSource.read()
          },
          dataSource: {
            data: [],
            autoSync: false,
            serverFiltering: true,
            transport: {
              read: function (o) {

                var dataResolve = [];

                
                  dataResolve.push({name:"A", id: 1});
                data=dataResolve;
                o.success(data);
              }
            }
          }
});
</script>
</body>
</html>
 Run code snippetReturn to post
0 голосов
/ 16 марта 2019

В вашем transport.read вы заменяете потенциальные данные ответа в 'o' массивом, содержащим один элемент "A". Кроме того, переменная data обращается к ближайшему замыканию (глобальному?), Поскольку она не ограничена областью действия var или let декларацией.

Ваш код 

            var dataResolve = [];
            dataResolve.push("A");
            data=dataResolve;
            o.success(data);

Это не соответствует ожиданию того, что элементы массива будут объектами с полями с именами "name" и "id", как указано в конфигурации комбинированного списка.

Не уверен, что вы конкретно пытаетесь сделать, но чтобы ввести свои собственные данные в чтение, попробуйте использовать только это: 

                o.success([
                  {name:"Bhautik", id: 1},
                ]);

Источник данных не настроен для подключения к какому-либо удаленному серверу, но когда это произойдет, вы можете использовать событие dataBound, если планируете «настроить» ответ данных. Если вы не собираетесь использовать удаленные данные, просто поместите элементы в массив конфигурации dataSource.data и не выполняйте serverFiltering.

...