Use of Tab Folders in Blank Template - Forum - Kendo UI Builder by Progress: OpenEdge Edition - Progress Community
 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