Use of Tab Folders in Blank Template - Forum - Kendo UI Builder - Progress Community

Use of Tab Folders in Blank Template

 Forum

Use of Tab Folders in Blank Template

This question is not answered

Hi there,

have another one. How to use tab folders in the Blank Template?

tom.+

All Replies
  • 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