GoJS and Bootstrap Tabs issue

[northwoodssoftware]

GoJS and Bootstrap Tabs issue

[simonsarris]

Closed issues in Github is not really the place to ask for support help. Use the forum instead.

[simonsarris]

You will need to call myDiagram.requestUpdate() when the DIV that contains the diagram is fully in view. See:

http://gojs.net/latest/intro/resizing.html

http://gojs.net/latest/samples/tabs.html

[vapits]

Well you;re right. I manage to do that (i am using angular) by broadcasting a scope so i can now when to run it. Still though it does not render (the function runs without error).

I'm doing it like this:

$scope.renderDiagram = function(){
$scope.$broadcast('showDiagram');
};

and in my directive:

scope.$on('showDiagram', function () {
diagram.requestUpdate();
});

[vapits]

And my code is almost exactly like this sample:
http://www.gojs.net/latest/samples/angular.html

[nadvez]

Hi, I am stuck up with the similar situation.I am using angular with GOJS and tabs. My diagram is in tab3 and i have to click on inspect for it to show up.

Did you guys had it work and what was the solution ?

[simonsarris]

@nadvez Did you see how this was implemented?

http://gojs.net/latest/samples/tabs.html

[nadvez]

@simonsarris. Thanks but i dont think this will help me. As i am using angular uib tabset where each tab set has redirection to pages like this and each one of them has their own scope.

see below:

    <uib-tabset style="margin-top:-20px;">
        <uib-tab heading="Validate NED" id="devicetabs" class="navhead" select="tabSelected($index)">

            <uib-tab-heading>Step 1 : Validate NED
            </uib-tab-heading>
            <div ng-include="'app/config_gen/templates/validateNed.html'"></div>
        </uib-tab>
        <uib-tab heading="Service Parameters" class="navhead" id="devicetabs">
            <uib-tab-heading> Step 2 : Service Parameters
            </uib-tab-heading>
            <div ng-include="'app/config_gen/templates/serParam.html'"></div>
        </uib-tab>
        <uib-tab heading="Mapping" class="navhead" id="tab3">
            <uib-tab-heading> Step 3 : Mapping
            </uib-tab-heading>
            <div ng-include="'app/config_gen/templates/mapping.html'"></div>
        </uib-tab>
        <uib-tab heading="Make Package" class="navhead" id="tab4">
            <uib-tab-heading> Step 4 : Make and Deploy Package
            </uib-tab-heading>
            <div ng-include="'app/config_gen/templates/makePackage.html'"></div>
        </uib-tab>

    </uib-tabset>
</div>

I was just wondering how vapits acheived it in angular ?

[nadvez]

Hi Vapits,

How did you implement the diagram for the tab other than the first one. Is there a way to check your code. is it on the github for me to compare ?

[vapits]

@nadvez Sorry mate it's so long before I don't remember exactly and it's a private repo. Tho...
If you work with Angular-Ui (boothstrap) it should work. Otherwise add a listener on your tabs (you've got one by angular-ui) and on the change do the diagram.requestUpdate() mentioned above.

Take care.

[nadvez]

@vapits Thanks. DO you remember how did you invoke the scope of the diagram.requestUpdate() from the directive ?

it will return undefined as diagram is defined as part of directive which is inside the controller of the html included in the UI tabset?

[nadvez]

@simonsarris. also tried the tab implementation using the minimal go js implementation even then same problem. Do you know when to invoke the diagram.requestUpdate() ?

as it was returning undefined if i have it as Immediately executable function on tab load ?

[vapits]

Change the diagram with your diagram's name.

[nadvez]

Ya ... The problem is i am usinh uib tabset to include the html which
diagram as part of its controller .
. now how can i call that function on load on this tab ?

Did you use scope.brodcast?
On May 11, 2016 8:45 AM, "Vassilis Pitsounis" [email protected]
wrote:

Change the diagram with your diagram's name.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#10 (comment)