Issue in loading the Kendo Pivot Grid configurator inside another DIV container

[Navaneetha Krishnan S]

down votefavorite

I am using Angular2, and I have written a wrapper to load the Kendo Pivot Grid. My requirement is to load the Kendo Pivot Grid configurator inside another DIV container. Based on some button click event I can toggle the visibliity of the DIV which internally contains the KendoPivotGrid Configurator, but the Pivot Grid should be visible always. I am trying to load the Pivot Grid configurator and it works fine when it is loaded in a normal div tags. But If i try to load the same Pivot Grid configurator inside another DIV, then configurator is not getting loaded and I am getting the below mentioned error in browser console. core.umd.js:3462 EXCEPTION: Cannot call method 'setDataSource' of kendoPivotConfigurator before it is initializedErrorHandler.handleError @ core.umd.js:3462 core.umd.js:3467 ORIGINAL STACKTRACE:ErrorHandler.handleError @ core.umd.js:3467 core.umd.js:3468 Error: Cannot call method 'setDataSource' of kendoPivotConfigurator before it is initialized at HTMLDivElement.<anonymous> (http://localhost:49928/js/Kendo/kendo.all.min.js:26:3817) at Function.each (http://localhost:49928/js/jquery.min.js:2:2861) at R.fn.init.each (http://localhost:49928/js/jquery.min.js:2:845) at R.fn.init.e.fn.(anonymous function) [as kendoPivotConfigurator] (http://localhost:49928/js/Kendo/kendo.all.min.js:26:3764) at init._bindConfigurator (http://localhost:49928/js/Kendo/kendo.all.min.js:59:427) at new init (http://localhost:49928/js/Kendo/kendo.all.min.js:58:30885) at HTMLDivElement.<anonymous> (http://localhost:49928/js/Kendo/kendo.all.min.js:26:4054) at Function.each (http://localhost:49928/js/jquery.min.js:2:2861) at n.fn.init.each (http://localhost:49928/js/jquery.min.js:2:845) at n.fn.init.e.fn.(anonymous function) [as kendoPivotGrid] (http://localhost:49928/js/Kendo/kendo.all.min.js:26:4031)ErrorHandler.handleError @ core.umd.js:3468 Subscriber.js:227 Uncaught Error: Cannot call method 'setDataSource' of kendoPivotConfigurator before it is initialized(…) The HTML code which works fine is below (This is the HTML code which i am having in the angular2 components HTML template) <div id="configurator" class="hidden-on-narrow"></div> <div class="hidden-on-narrow" id="pivotgrd"></div> The below code to load inside another DIV tag <div id="toggle"> <div id="configurator" class="hidden-on-narrow"></div> </div> <div class="hidden-on-narrow" id="pivotgrd"></div> Any specific reasons why it doesn't work inside another DIV element? What is causing the problem When I have a extra/parent DIV for the congfigurator?