Динамически создавать выпадающие списки кендо из массива массивов - PullRequest
Новая
       40

Динамически создавать выпадающие списки кендо из массива массивов

0 голосов
/ 11 февраля 2020

У меня есть список массивов из веб-службы, хранящихся в переменной.

Если я использую один массив или список из 1 объектов, он работает.

Если я использую список из любого числа длиннее 1 массива, будет работать только последний сгенерированный раскрывающийся список. Данные выглядят потерянными, так как я не могу щелкнуть элемент управления и увидеть элементы.

При проверке объекта в консоли данные не отображаются.

Функция Javascript / Jquery выглядит так: 

for (var i = 0; i < $scope.filters.data.length; i++) {
            var control = $scope.filters.data[i];

            var optionName = control.Name
            if (control.UiType == "SingleSelect") {
                var controlName = "selectFilterFor" + optionName.trim();

                var selectControl = $scope.getSingleSelect(optionName, controlName);

                $(".search-panel-fields")[0].innerHTML += selectControl;

                var selectorName = "#" + controlName;

                //$(controlName).kendoDropDownList().data("kendoDropDownList");

                $(selectorName).kendoDropDownList({
                    dataTextField: "Name",
                    dataValueField: "Value",
                    dataSource: control.Attributes,
                    dataBound: onDataBound,
                    //index: 0,
                    optionLabel: { Name: "", Value: "" }
                });

            }

        }

Я думал, что DOM может быть слишком медленным, но добавив setTimeout (function () {// updateDom}, 1000); ничего не дало.

Я также добавил некоторые записи в событие dataBound, чтобы посмотреть, все ли выглядит хорошо: 

dataBound: function (e) {
     console.log('data is bound: ' + control.Name);
     console.log(e.sender.dataItems());
  },

И элемент с массивом данных находится там. Я специально избегаю дополнительных сетевых вызовов прямо сейчас.

Быстрая, измененная версия JSON Data: 

{"JSON":[{"SHORT":"AREA","Name":"Areas","UIOGLItrol":{"Name":"Area","UiType":"SingleSelect"},"Attributes":[{"Name":"BuildWEZL Area A","Value":"A","FieldType":null,"IsActive":true},{"Name":"9611","Value":"9611","FieldType":null,"IsActive":true}]},{"SHORT":"HAVOCSAYOR","Name":"HAVOCSAYORs","UIOGLItrol":{"Name":"HAVOCSAYOR","UiType":"SingleSelect"},"Attributes":[{"Name":"NO HAVOCSAYOR","Value":"ND","FieldType":null,"IsActive":true},{"Name":"BUILDWEZL","Value":"BLD","FieldType":null,"IsActive":true},{"Name":"MARIL","Value":"MAR","FieldType":null,"IsActive":true},{"Name":"SAMMARAL","Value":"ELE","FieldType":null,"IsActive":true},{"Name":"GENERAL","Value":"GEN","FieldType":null,"IsActive":true},{"Name":"GUILDMENTATION","Value":"INS","FieldType":null,"IsActive":true},{"Name":"PARTS","Value":"MECH","FieldType":null,"IsActive":true},{"Name":"MANA DELIVERY","Value":"PDL","FieldType":null,"IsActive":true},{"Name":"PROJECT MANAGEMENT","Value":"PMGT","FieldType":null,"IsActive":true},{"Name":"MEGAUTIL","Value":"STR","FieldType":null,"IsActive":true},{"Name":"OGLISTTERMION","Value":"OGLI","FieldType":null,"IsActive":true},{"Name":"PIPWEZL","Value":"PIP","FieldType":null,"IsActive":true},{"Name":"ANTLERS","Value":"QC","FieldType":null,"IsActive":true}]},{"SHORT":"ItemISION","Name":"Itemisions","UIOGLItrol":{"Name":"Itemision","UiType":"SingleSelect"},"Attributes":[{"Name":"Item - (Placeholder)","Value":"-","FieldType":null,"IsActive":true},{"Name":"Item A","Value":"A","FieldType":null,"IsActive":true},{"Name":"Item B","Value":"B","FieldType":null,"IsActive":true},{"Name":"Item C","Value":"C","FieldType":null,"IsActive":true},{"Name":"Item D","Value":"D","FieldType":null,"IsActive":true},{"Name":"Item E","Value":"E","FieldType":null,"IsActive":true},{"Name":"Item F","Value":"F","FieldType":null,"IsActive":true},{"Name":"Item G","Value":"G","FieldType":null,"IsActive":true},{"Name":"Item H","Value":"H","FieldType":null,"IsActive":true},{"Name":"Item J","Value":"J","FieldType":null,"IsActive":true},{"Name":"Item K","Value":"K","FieldType":null,"IsActive":true},{"Name":"Item 00","Value":"00","FieldType":null,"IsActive":true},{"Name":"Item 01","Value":"01","FieldType":null,"IsActive":true},{"Name":"Item 02","Value":"02","FieldType":null,"IsActive":true},{"Name":"Item 03","Value":"03","FieldType":null,"IsActive":true},{"Name":"Item 04","Value":"04","FieldType":null,"IsActive":true},{"Name":"Item 05","Value":"05","FieldType":null,"IsActive":true},{"Name":"Item 06","Value":"06","FieldType":null,"IsActive":true},{"Name":"Item 07","Value":"07","FieldType":null,"IsActive":true},{"Name":"Item 08","Value":"08","FieldType":null,"IsActive":true},{"Name":"Item 09","Value":"09","FieldType":null,"IsActive":true},{"Name":"Item 10","Value":"10","FieldType":null,"IsActive":true},{"Name":"Item I","Value":"I","FieldType":null,"IsActive":true},{"Name":"Item 11","Value":"11","FieldType":null,"IsActive":true}]}],"Response Payload":{"EDITOR_OGLIFIG":{"text":"[{\"SHORT\":\"AREA\",\"Name\":\"Areas\",\"UIOGLItrol\":{\"Name\":\"Area\",\"UiType\":\"SWEZLleSelect\"},\"Attributes\":[{\"Name\":\"BuildWEZL Area A\",\"Value\":\"A\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"9611\",\"Value\":\"9611\",\"FieldType\":null,\"IsActive\":true}]},{\"SHORT\":\"HAVOCSAYOR\",\"Name\":\"HAVOCSAYORs\",\"UIOGLItrol\":{\"Name\":\"HAVOCSAYOR\",\"UiType\":\"SWEZLleSelect\"},\"Attributes\":[{\"Name\":\"NO HAVOCSAYOR\",\"Value\":\"ND\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"BUILDWEZL\",\"Value\":\"BLD\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"MARIL\",\"Value\":\"MAR\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"SAMMARAL\",\"Value\":\"ELE\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"GENERAL\",\"Value\":\"GEN\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"GUILDMENTATION\",\"Value\":\"INS\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"PARTS\",\"Value\":\"MECH\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"MANA DELIVERY\",\"Value\":\"PDL\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"PROJECT MANAGEMENT\",\"Value\":\"PMGT\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"MEGAUTIL\",\"Value\":\"STR\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"OGLISTTERMION\",\"Value\":\"OGLI\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"PIPWEZL\",\"Value\":\"PIP\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"ANTLERS\",\"Value\":\"QC\",\"FieldType\":null,\"IsActive\":true}]},{\"SHORT\":\"ItemISION\",\"Name\":\"Itemisions\",\"UIOGLItrol\":{\"Name\":\"Itemision\",\"UiType\":\"SWEZLleSelect\"},\"Attributes\":[{\"Name\":\"Item - (Placeholder)\",\"Value\":\"-\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item A\",\"Value\":\"A\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item B\",\"Value\":\"B\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item C\",\"Value\":\"C\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item D\",\"Value\":\"D\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item E\",\"Value\":\"E\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item F\",\"Value\":\"F\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item G\",\"Value\":\"G\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item H\",\"Value\":\"H\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item J\",\"Value\":\"J\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item K\",\"Value\":\"K\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 00\",\"Value\":\"00\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 01\",\"Value\":\"01\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 02\",\"Value\":\"02\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 03\",\"Value\":\"03\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 04\",\"Value\":\"04\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 05\",\"Value\":\"05\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 06\",\"Value\":\"06\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 07\",\"Value\":\"07\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 08\",\"Value\":\"08\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 09\",\"Value\":\"09\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 10\",\"Value\":\"10\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item I\",\"Value\":\"I\",\"FieldType\":null,\"IsActive\":true},{\"Name\":\"Item 11\",\"Value\":\"11\",\"FieldType\":null,\"IsActive\":true}]}]","mode":"application/json"}}}

Как заставить Kendo правильно создавать все объекты

1 Ответ

2 голосов
/ 11 февраля 2020

У вас могут быть некоторые проблемы со свойствами элементов в массиве. Более безопасный подход для добавления элементов был бы .appendTo вместо innerHTML конкатенация

На основе «измененных данных», показанных в вопросе, следующее должно составить три раскрывающихся списка кендо. 

  response.JSON.forEach (control => 
  { if (control.UIOGLItrol.UiType == "SingleSelect") 
    {
      var controlId = "selectFilterFor" + control.Name;

      $("<input>", {id:controlId, name:control.Name, class:"ssInput", type:"text"})
      .appendTo(".search-panel-fields");

      $("#"+controlId).kendoDropDownList({
        dataTextField: "Name",
        dataValueField: "Value",
        dataSource: control.Attributes,
        dataBound: onDataBound,
        optionLabel: { Name:"", Value:"" }
      });
    }
  });

Смотрите это Додзё

...