Having problem with telerik components inside a tabbar

Suite and Optimus Suite 5
#1

Hi all,

I have 2 tabbars in my page…On of the tabbars contains a radTreeview and also a radListBox, both from telerik components…When I navigate between two tabs, telerik treeview and also listbox dont disappear, they are still there in another tab…What should I do?
Here is my code:

<div class="content">
    <table>
        <tr>
            <td>
                <div id="a_tabbar" style="width: 800px; height: 600px; direction: rtl;" dir="rtl">
                    <div id='html_1'>
                        <table>
                            <tr>
                                <td>
                                    <dxwgv:ASPxGridView ID="ASPxGridView1" runat="server" CssFilePath="~/App_Themes/BlackGlass/GridView/styles.css"
                                        CssPostfix="BlackGlass" OnRowCommand="ASPxGridViewAllDims_RowCommand" AutoGenerateColumns="false">
                                        <Styles CssFilePath="~/App_Themes/BlackGlass/GridView/styles.css" CssPostfix="BlackGlass">
                                            <Header ImageSpacing="5px" SortingImageSpacing="5px">
                                            </Header>
                                        </Styles>
                                        <Images ImageFolder="~/App_Themes/BlackGlass/GridView">
                                        </Images>
                                        <Columns>
                                            <dxwgv:GridViewDataTextColumn  VisibleIndex="0" CellStyle-CssClass="stylePointer">
                                                <DataItemTemplate>
                                                    <asp:ImageButton ID="ImageButton1" CausesValidation="false" runat="server" ImageUrl="images/pointer/Ok.png" />
                                                </DataItemTemplate>
                                                <CellStyle CssClass="stylePointer">
                                                </CellStyle>
                                            </dxwgv:GridViewDataTextColumn>
                                            <dxwgv:GridViewDataTextColumn PropertiesTextEdit-ClientInstanceName="DimTables"
                                                Name="dimTables" VisibleIndex="1">
                                                <PropertiesTextEdit ClientInstanceName="DimTables">
                                                </PropertiesTextEdit>
                                                <DataItemTemplate>
                                                    <asp:Label ID="lblDimNames" runat="server" Text='<%#Bind("Alias_Name")%>' SkinID="Label_Skin"></asp:Label>
                                                </DataItemTemplate>
                                            </dxwgv:GridViewDataTextColumn>
                                        </Columns>
                                    </dxwgv:ASPxGridView>
                                </td>
                            </tr>
                        </table>
                    </div>
                    <div id='html_2'>
                        <table>
                            <tr>
                                <td>
                                    

                                    <telerik:RadTreeView runat="server" ID="radTreeView2" EnableDragAndDrop="false" OnClientMouseOver="onTreeViewMouseOver"
                                        OnClientMouseOut="onTreeViewMouseOut" OnClientNodeDragStart="onTreeViewDragStart"
                                        OnClientNodeDropping="onTreeViewDropping" OnClientNodeDragging="onTreeViewDragging"
                                        OnClientNodeClicked="onClientNodeClicked" OnNodeExpand="radTreeView_NodeExpand"
                                        Skin="Vista" Style="direction: rtl" Font-Names="Tahoma" Font-Size="11px" >
                                        <Nodes>
                                        </Nodes>
                                    </telerik:RadTreeView>
                                </td>
                                <td>
                                </td>
                                <td>
                                    <telerik:RadListBox runat="server" ID="RadListBox2" EnableDragAndDrop="True" AllowReorder="true"
                                        Height="200px" OnClientDropping="onListBoxDropping" OnClientDragStart="onListBoxDragStart"
                                        OnClientMouseOver="onListBoxMouseOver" OnClientMouseOut="onListBoxMouseOut" OnClientDragging="onListBoxDragging"
                                        PersistClientChanges="true" OnClientLoad="onClientLoad" Width="150" AllowDelete="True">
                                        <ButtonSettings ShowReorder="false" ShowDelete="true"/>
                                    </telerik:RadListBox>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div>
            </td>
        </tr>
    </table>

    <script>

        function initTabbar(container, mode, align) {
            var tabbar = new dhtmlXTabBar(container, mode);
            tabbar.setSkin('modern');
            tabbar.setImagePath("Tabbar/codebase/imgs/");
            tabbar.setAlign(align);
            tabbar.enableContentZone(true);
            tabbar.enableAutoSize("800px", "600px");

            tabbar.addTab("a1", "T1", "200px");
            tabbar.addTab("a2", "T2", "200px");

            tabbar.setContent("a1", "html_1");
            tabbar.setContent("a2", "html_2");

            tabbar.showInnerScroll();

            tabbar.enableAutoSize();
            return tabbar;
        }

        tabbar = new initTabbar("a_tabbar", "top", "right");

    </script>

</div>

Thanks…

#2

Try to use enableForceHiding method:

tabbar.enableForceHiding(true);

#3

Thank you very much…It worked… :smiley:

#4

Hi,

Now I have another problem…In the previous code that I posted, when I expand a node of telerik treeview, I cant see the childnodes of the expanded node, because they are on the other nodes. please look at the attached file.

tabbar.JPG847×372 22.5 KB

Please help me solve the problem

Thanks a lot

#5

Doesn’t the problem occur if you component is not in the tab ?

if you sure that the problem is caused by using tabbar, attach the complete demo - the sample that contains all necessary files. It should not contain server-side scripts.

#6

Hi,

Thanks for your reply. No, the problem only occures when the telerik treeview is used inside the tabbar but out of it works well…

I attached a sample program that demonstrates the problem…Hope it would help…And I had to delete Telerik.Web.UI.dll from this sample because it was 16 mg and I couldnt attach it here…

Thanks a lot
Tabbar with TelerikTreeView.rar (560 KB)

#7

Hi,

you may try to use iframes loading mode. Possibly it’ll resolve the problem.

dhtmlxTabbar/samples/01_initialization/06_loading_by_iframes.html

Another solution is to use only tabbar header and disable content part and use own approach to display content:
tabbar.enableContentZone(false);

The sample - dhtmlxTabbar/samples/03_orientation/05_all.html

#8

Thanks a lot dear Alexandra…Your second suggestion solved my problem…Now It works very well :smiley:

But I dont know why the scroll bar doesnt get appeared when data is large…

I used the below code:

        function initTabbar(container, mode, align) {
            var tabbar = new dhtmlXTabBar(container, mode);
            tabbar.setSkin('modern');
            tabbar.setImagePath("Tabbar/codebase/imgs/");
            tabbar.setAlign(align);
            tabbar.enableAutoSize("800px", "600px");
            tabbar.addTab("1", "Tab1", "200px");
            tabbar.enableContentZone(false);
            tabbar.preventIECashing(true);
            tabbar.enableForceHiding(true);
            tabbar.showInnerScroll();
           return tabbar;
        }

Although i used showInnerScroll but it still doesnt work.

Thank you once again

#9

tabbar with enableContentZone(false) doesn’t have content zone - please see the sample I mentioned in the previous answer. Therefore, enableAutoSize and showInnerScroll can not be applied in this case.

#10

Thanks for your help…

I solved the problem with another solution. I used “overflow:auto” for the main div and now when data is large the page has scrollbars… :wink:

Thanks