Use of Tab Folders in Blank Template

Hello,

Here is a possible approach that you could try.

You can either specify the HTML for the tab folders in the custom HTML file <project>/src/html/<module-view>/topSection.html or specified via a custom HTML component.

A technique with the custom HTML component is that you could set the custom HTML component to a simple div, example: <div id="some-id"></div>, then dynamically set the rest of the HTML code from code in the onShow in the view-factory.js (<project>/src/scripts/<module-view>/view-factory.js).

You can use the following code as an example for the tabstrip:

   demos.telerik.com/.../animation

The HTML code for <div id="example"> ... </div> would go in the topSection.html file and the script code in a createTabStrip() function.

In the onShow function, you code write code like the following:

                   ...

                   cancelWatch = this.scope.$watch(function () {

                       //return angular.element("#customhtml0").html();

                       return angular.element("#example").html();

                   }, function (newValue, oldValue) {

                       if (newValue) {

                           // createChart();

                           createTabStrip();

                           cancelWatch();

                       }

                   });

This code uses a $watch() which tests for element("#example").html() as a way to test that the HTML code for the "example" element has been loaded.

You could wrap this code into a function of your own, in case you want to reuse the technique and need replace the implementation later.

I hope this helps,

Edsel