Dynamically Create Kendo Drop Down Lists from Array of Arrays

I have a list of Arrays from a web service stored in a variable.

If I use one array, or a list of 1 objects it works.

If I use a List of any number longer than 1 array, only the last generated drop down list will work. The data appears lost, as I can't click the control and see items.

Inspecting the object in the console doesn't show data.

The Javascript / Jquery function looks like:

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: "" }
                });

            }

        }

I thought the DOM might be too slow, but adding a setTimeout(function() {//updateDom }, 1000); had no effect.

I also added some logging on a dataBound event to see if it all looks good:

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

And the element, with an array of data is there. I specifically am avoiding an additional network call right now.

A quick, modified version of the 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"}}}

How do I get Kendo to instantiate all of the objects correctly?

Solution

You may be having some problems with the properties of the items in the array. A safer approach for adding elements would be .appendTo instead of innerHTML concatenation

Based on the 'modified data' shown in the question, the following should construct three kendo drop downs.

  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:"" }
      });
    }
  });

See this Dojo