Dynamically Inserted Kendo tabStrip tab not loading a content div

Question

I'm trying to create an "Add tab" tab in Kendo which is added to a tabStrip that is created when a dropdown list is selected. The initial data that loads with Ajax displays fine, but the user-added tabs do not.

It is supposed to insert a tab before itself in the tabStrip (which it does), however when I try to initialize the Kendo editor that it contains, I get an "undefined" error - this is because the relevant content element that is supposed to contain my editor does not get created along with the new tab.

This is what happens when the dropdown list has been selected:

$('#questionEditor').remove();                                                 //Remove and create the question editor tabs
                $('body').append('<div id="questionEditor"></div>');
                $('#questionEditor').kendoTabStrip();

                var tabStrip = $('#questionEditor').data('kendoTabStrip');

                var count = 0;                                                                //Count the amount of tabs
                for (var i = 0 ; i < returndata.questions.length; i++) {
                    var editor = '<div id="questionText' + i + '"></div>';

                    tabStrip.append([{ text: "Question " + (i + 1), content: editor }]);

                    var textEditor = '#questionText' + i;
                    $(textEditor).kendoEditor();
                    $(textEditor).data('kendoEditor').value(returndata.questions[i].QuestionText);

                    count++;
                }

                tabStrip.append([{ text: "Add Question", spriteCssClass: "k-add k-icon" }]);
                var lastChild = tabStrip.tabGroup[0].lastChild;
                $(lastChild).click(function () {                                                                        //New tab
                    var editor = '<div id="questionText' + count + '"></div>';
                    tabStrip.insertBefore([{ text: "Question " + (count + 1), content: editor }], $(lastChild));

                    var textEditor = '#questionText' + count;
                    $(textEditor).kendoEditor();
                    count++;
                });

But the new tabs don't display anything when clicked. Is there some kind of kendo thing that doesn't work when inside a jQuery ajax object?

Reece Reece · Accepted Answer · 2013-10-22T13:45:14

This is kind of a hacky solution, but the problem was there was no contentHolder for my "Add New Tab" tab - so I added a content property to it on initialization and just disabled it.

Dynamically Inserted Kendo tabStrip tab not loading a content div

1 Answers