dataTable not rendered properly when included in dynamic tabView

[parysto]

Hi,

I'm using BootsFaces 1.2.0-SNAPSHOT to add tabs dynamically to a tabView (Issue #807). However, I observed two issues when I include a dataTable in each dynamically created tab:

1

The dataTable's search and pagination row is rendered more than once (one time for each tab):

<b:tabView>
    <b:tab title="Tab" value="#{list}" var="entry">
        <b:dataTable value="#{entry.list}" var="row">
            <b:dataTableColumn>td1</b:dataTableColumn>
            <b:dataTableColumn>td2</b:dataTableColumn>
            <b:dataTableColumn>td3</b:dataTableColumn>
        </b:dataTable>
    </b:tab>
</b:tabView>

2

When the dataTable is used together with a header-facet and a selectMultiMenu is added to the same tab, the content of all tabs is shown on the first tab and switching between tabs isn't possible anymore.

<b:form>
    <b:tabView>
        <b:tab title="Tab" value="#{list}" var="entry">
            <b:selectMultiMenu>
                <f:selectItems value="#{entry.list}" var="s" itemLabel="#{s.name}"/>
            </b:selectMultiMenu>

            <b:dataTable value="#{entry.list}" var="row">
                <f:facet name="header">
                    <tr>
                        <th>th1</th>
                        <th>th2</th>
                        <th>th3</th>
                    </tr>
                </f:facet>
                <b:dataTableColumn>td1</b:dataTableColumn>
                <b:dataTableColumn>td2</b:dataTableColumn>
                <b:dataTableColumn>td3</b:dataTableColumn>
            </b:dataTable>
        </b:tab>
    </b:tabView>
</b:form>

The second issue seems to be caused by a missing </div> tag in the generated html after the dataTable. This causes each tab to be nested in its preceding tab.

[vsvetoslavov]

Hi parysto! One thing you may want to consider when using tabs is that the content of invisible tabs may have visual flaws, related to being rendered but hidden and thus rendering javascript-based calculations wrong. In my project I use some javascript code to beautify some things a bit, and I neded to call that code on show of tabs. However I have not had any problems putting data tables in tabs - especially when they're on the first (the one displayed by default) tab.

[parysto]

Hi vsvetoslavov,

thanks for your hint.

When I use static tabs, the data tables are rendered without any flaws:

<b:tabView>
    <b:tab title="Tab1">
        <b:dataTable value="#{entry.list}" var="row">
            <b:dataTableColumn>td1</b:dataTableColumn>
            <b:dataTableColumn>td2</b:dataTableColumn>
            <b:dataTableColumn>td3</b:dataTableColumn>
        </b:dataTable>
    </b:tab>
    <b:tab title="Tab2">
        <b:dataTable value="#{entry.list}" var="row">
            <b:dataTableColumn>td1</b:dataTableColumn>
            <b:dataTableColumn>td2</b:dataTableColumn>
            <b:dataTableColumn>td3</b:dataTableColumn>
        </b:dataTable>
    </b:tab>
    <b:tab title="Tab3">
        <b:dataTable value="#{entry.list}" var="row">
            <b:dataTableColumn>td1</b:dataTableColumn>
            <b:dataTableColumn>td2</b:dataTableColumn>
            <b:dataTableColumn>td3</b:dataTableColumn>
        </b:dataTable>
    </b:tab>            
</b:tabView>

It just happens when I'm using dynamic tabs. I guess that the JS required to render the tables' decorations/input fields is not called properly by the logic that renders the dynamic tabs, or there is an error with the tabs' ID. (So that the JS is called more than once for each table, i.e. called one time for each dynamic tab on each table.)

[stephanrauh]

I'm afraid development of BootsFaces has slowed down considerably. We'll never manage to address this issue. Let's close it.