Tabbar on scheduler lightbox

Suite and Optimus Suite 5
#1

I am trying to use a tabbar on a scheduler lightbox in your suite. I am following your example of initializing it with HTML, but am not getting anywhere. Before I upload a bunch of code, is this even possible? Do you have a step-by-step instruction anywhere. Thanks.

#2

Yep, it is possible.

You can create a lightbox section which will contain a tabbar with some content inside ( you can reuse lightbox sections inside of tabbar though )

Lightbox section can contain an arbitrary HTML code. You can check an example of combo usage (which is another dhtmlx component), tabbar can be initialized in the similar way.

Also, you can replace lightbox with a fully custom form ( dhtmlxwindow with a tabbar inside for example )

#3

I think I’m close, and it’s probably something simple I’m missing. Any ideas are appreciated.

I’m mixing bootstrap 4 with the scheduler. I have a lightbox defined in an ASP.NET partial view with a bootstrap card as a formatting container:

<div id="divScheduledEventLightBox" class="card card-default" style="width:1000px;display: none;z-index:10001;position:absolute;top:50%;left:50%;">
<div class="card-header">
    <div class="text-center">
        Hearing Details
        <span class="pull-right clickable close-icon" data-effect="fadeOut"><i class="fa fa-times"></i></span>
    </div>
</div>
<div class="card-block">
    <div class="row">
        <div class="col-lg-12">
            <label id="ScheduledEvent_Detail">Lightbox Heading</label>
        </div>
    </div>
    <div id="tabContainer" style="width: 800px; height: 600px;">
<div id="divHearingInformation" name="Hearing Information" selected="1"> 
    <p>Hearing Information</p>
    ... other tags go here that are loaded with data ...
</div>
<div id="divHearingAction" name="Hearing Action" selected="1"> 
    <p>Hearing Action</p>

</div>
</div>  <!-- end tabcontainer -->
</div>  <!-- end card-block -->
</div> <!-- end card -->

Once the tags in divHearingInformation and divHearingAction are loaded with data, I initialize the tabbar and start the lighbox:

    var myTabbar = new dhtmlXTabBar("tabContainer");
    myTabbar.addTab("a1", "Hearing Information", null, null, true);
    myTabbar.addTab("a2", "Hearing Action");

    myTabbar.tabs("a1").attachObject("divHearingInformation");
    myTabbar.tabs("a2").attachObject("divHearingAction");

    scheduler.startLightbox(id, document.getElementById("divScheduledEventLightBox"));

I can verify in debug that the tags in divHearingInformation are getting loaded with data. The lighbox pops up as expected, the card-header div shows with data as expected, but the tabContainer div is blank.

#4

Are you calling the tabbar init code when form is already visible and while the form in the hidden state?

The constructor of tabbar adjust self to the parent container, and if in hidden state it means tabbar sets zero sizes for itself.

As possible fix, you can add a call to myTabbar.setSizes() after making the window visible