Search code examples
javascriptkendo-uikendo-dropdown

Add a kendo drop down dynamically using javascript on html page

I'm trying to replicate the google forms for a personal website. The problem I've run into is dynamically creating the controls as the user adds another section.

I cannot create the javascript kendo drop down, can someone assist me with this, please.

My code:

var IndexController = {

options: {
    count: 0
},

init: function () {
    var me = IndexController;
    me.bindEvents();

},

bindEvents: function () {
    var me = IndexController;
    var data = [
        { text: "Black", value: "1" },
        { text: "Orange", value: "2" },
        { text: "Grey", value: "3" }
    ];
    me.options.count = 0;
    //$("#Text").click(IndexController.AddText);
    //$('*[data-target="#addField"]').click(IndexController.AddActive);
},

AddNewSection: function () {
    var me = IndexController;
    $("#addNew").before('<div id="addNew" class="AddNew center">\
        <h4><label>Type</label></h4>\
        <input id="'+ me.options.count+'" value="1" style="width: 100%;" />\
    </div>');
    me.CreateDropDown(me.options.count);
    count++;
},

CreateDropDown: function (id) {
    var me = IndexController;
    ("#"+id+"").kendoDropDownList({
        dataTextField: "text",
        dataValueField: "value",
        dataSource: me.bindEvents.data,
        index: 0,
        change: me.onChange()
    });
},

onChange: function () {

}
};

It adds the div but does not load the kendo drop down. I get this error: error The output: output

Kendo works in other parts of the website working with MVC. The scripts are all bundled.

Thank you in advance

Solution

  • It's just seems like you forget to type $ at 37'th line.

    $("#type").kendoDropDownList({})

    When error says "is not a function", that means either you typed incorrect function name or you are not accessing right element.

    In this case you are trying to reach kendoDropDownList function of "#type" string.