listItems not working when base element is input in igEditor

Question

i am adding textfields dynamically as

var input = $('<input class="EditorFields" id="textfield"/>');
$(input).igEditor({
                width: 140,
                required:true
            });

this is working fine. But when i am trying to add listItems property then its not working.

$(input).igEditor({
                width: 140,
                required:true,
                listItems : ["red","blue","yellow"]
            });

i do not want to change the base element to select. Please help.

Answer 1

First things first - the Ignite UI jQuery API docs state that the button option defaults to none - if you want to have a drop-down add this:

button : "dropdown",

Why this still won't work? Dynamically adding dynamic controls is tricky sometimes if you don't know them in great detail. Same for jQuery, it's a common thing people miss - jQuery creates items in a document fragment so you need to be careful how you append them to the DOM.

When you provide an INPUT element and request a complex editor, the control's additional items (buttons, drop-down, validation messages, etc.) are built around that input and the whole thing wrapped in a container SPAN. Because you refer to the input and it works the first time I assume you attach it directly. Basically when you create a complex editor and only afterwards attach to eh DOM using the same input reference you are leaving all the extra markup stuck in the document fragment.

I can think of about 3 ways to get this to work, you pick what suits best yopur needs:

1) Append item first so the Editor can properly initialize in the DOM afterwards:

var input = $('<input class="EditorFields" id="textfield"/>').appendTo("body");

2) Povide the container, instead the input if possible:

var input1 = $('<span class="EditorFields" id="textfield1"/>');

3) Select the parent when you know you have one and append it instead:

 $(input2).igEditor({
        width: 140,
        required: true,
        listItems: ["red2", "blue2", "yellow2"],
        button: "dropdown"
    }).parent().appendTo("body");

Here's a JSFiddle with all of those: http://jsfiddle.net/damyanpetev/ZRqb2/