Dynamically generated tab closes on click

[Daniel]

Hi,

Basically I have a static tab in my page (not closable) with a radgrid in it. On a row double click, I create a tab in javascript, select the tab and generate a user control in it (a detail grid). So far so good, it works great, however theres a wierd behavior with a newly generated tab under certain conditions.

Here is the javascript part of my code:

<script type="text/javascript">
            var tabStrip1;

            function OnClientLoad() {
                tabStrip1 = $find('<%= RadTabStrip1.ClientID %>');

                for (var i = 0; i < tabStrip1.get_tabs().get_count(); i++) {
                    if (i != 0) {
                        AttachCloseImage(tabStrip1.get_tabs().getItem(i), "../../Images/delete.gif");
                    }
                }
            }

            function addNewTab(sender, eventArgs) {
                //Va chercher l'information du row que j'ai de besoin
                var dataItem = $get(eventArgs.get_id());
                var grid = sender;
                var MasterTable = grid.get_masterTableView();
                var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];
                var cell = MasterTable.getCellByColumnUniqueName(row, "element_couvert");
                var value = cell.innerHTML;

                //add le tab

                var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
                var tab;
                tab = tabStrip.findTabByText(value);
                if (tab) {
                    tab.click();
                } else {
                    var tab = new Telerik.Web.UI.RadTab();
                    tab.ID = cell.innerHTML.replace("/", "").replace(" ", "");
                    tab.set_text(value);
                    tabStrip.trackChanges();
                    tabStrip.get_tabs().add(tab);
                    tabStrip.commitChanges();

                    tab.click();
                    AttachCloseImage(tab, "../../Images/delete.gif");

                }

            }

            function CreateCloseImage(closeImageUrl) {
                var closeImage = document.createElement("img");
                closeImage.src = closeImageUrl;
                closeImage.alt = "Fermer cet onglet";
                return closeImage;
            }

            function AttachCloseImage(tab, closeImageUrl) {
                var closeImage = CreateCloseImage(closeImageUrl);
                closeImage.AssociatedTab = tab;
                closeImage.onclick = function(e) {
                    if (!e) e = event;
                    if (!e.target) e = e.srcElement;

                    deleteTab(tab);

                    e.cancelBubble = true;
                    if (e.stopPropagation) {
                        e.stopPropagation();
                    }

                    return false;
                }

                tab.get_innerWrapElement().appendChild(closeImage);
            }

            function deleteTab(tab) {
                var tabStrip = $find("<%= RadTabStrip1.ClientID %>");
                var multiPage = $find("<%= RadMultiPage1.ClientID %>");

                var pageView = tab.get_pageView();
                var tabToSelect = tab.get_nextTab();
                if (!tabToSelect)
                    tabToSelect = tab.get_previousTab();

                tabStrip.trackChanges();
                tabStrip.get_tabs().remove(tab);
                tabStrip.commitChanges();

                multiPage.trackChanges();
                multiPage.get_pageViews().remove(pageView);
                multiPage.commitChanges();

                if (tabToSelect)
                    tabToSelect.set_selected(true);
            }

            function onTabSelecting(sender, args) {
                if (args.get_tab().get_pageViewID()) {
                    args.get_tab().set_postBack(false);
                }
            }
        </script>

code behind:

Protected Sub RadMultiPage1_PageViewCreated(ByVal sender As Object, ByVal e As RadMultiPageEventArgs) Handles RadMultiPage1.PageViewCreated
        If e.PageView.ID <> "RadPageView5" Then
            Dim userControlName As String = "/Commun/UserControls/DetailElementCouvert.ascx"
            Dim ctrl As Control
            Dim userControl As Fede.Web.Sifa.DetailElementCouvert
            ctrl = LoadControl(userControlName)

            userControl = CType(ctrl, Fede.Web.Sifa.DetailElementCouvert)
            userControl.ID = e.PageView.ID & "_userControl"
            userControl.Strategie = e.PageView.ID.Trim()
            userControl.LaDate = CDate(Master.fJour.SelectedDate)

            e.PageView.Controls.Add(userControl)
        End If
    End Sub

    Private Sub AddPageView(ByVal tab As RadTab)
        Dim pageView As RadPageView = New RadPageView
        pageView.ID = tab.Text
        RadMultiPage1.PageViews.Add(pageView)
        RadMultiPage1.SelectedIndex = RadMultiPage1.PageViews.Count - 1
        pageView.CssClass = "pageView"
        tab.PageViewID = pageView.ID
    End Sub

    Protected Sub RadTabStrip1_TabClick(ByVal sender As Object, ByVal e As RadTabStripEventArgs) Handles RadTabStrip1.TabClick
        If String.IsNullOrEmpty(e.Tab.PageViewID) Then
            AddPageView(e.Tab)
            e.Tab.PageView.Selected = True
            e.Tab.Selected = True
        End If
    End Sub

html:

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" Orientation="HorizontalTop"
        SelectedIndex="0" MultiPageID="RadMultiPage1" OnClientLoad="OnClientLoad" OnClientTabSelecting="onTabSelecting">
        <Tabs>
            <telerik:RadTab Text="Information élément couvert" Selected="True" PageViewID="RadPageView5">
                <TabTemplate>
                    <div class="textWrapper">
                        Information élément couvert
                    </div>
                </TabTemplate>
            </telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
    <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0">
        <telerik:RadPageView runat="server" ID="RadPageView5">
            <telerik:RadGrid ID="RadGrid1" Culture="French (Canada)" runat="server" GroupingEnabled="False"
                ShowStatusBar="True" ClientSettings-ClientEvents-OnRowDblClick="addNewTab" ClientSettings-ClientEvents-OnCommand="OnCommand">
                <MasterTableView AllowFilteringByColumn="true" AllowPaging="True" AllowSorting="true"
                    AutoGenerateColumns="False" PageSize="16" CommandItemDisplay="Top">
                    <CommandItemTemplate>
                        <div style="float: right">
                            <telerik:RadButton ID="DownloadPDF" runat="server" Text="Confirmer action sur JV" />
                            <telerik:RadButton ID="RadButton5" runat="server" Text="Confirmer action sur FT" />
                            <telerik:RadButton ID="RadButton1" runat="server">
                                <Icon PrimaryIconCssClass="rbRefresh" PrimaryIconLeft="8" PrimaryIconTop="4" />
                            </telerik:RadButton>
                        </div>
                    </CommandItemTemplate>
                    <HeaderStyle HorizontalAlign="Center" VerticalAlign="Bottom" />
                    <PagerStyle AlwaysVisible="True" Mode="Slider" />
                    <ItemStyle Wrap="false" HorizontalAlign="Right" VerticalAlign="Middle" />
                    <AlternatingItemStyle Wrap="false" HorizontalAlign="Right" VerticalAlign="Middle" />
                    <Columns>
                        <telerik:GridBoundColumn DataField="etat_bloc" HeaderText="État du bloc" UniqueName="etat_bloc" FilterControlWidth="70%" DataType="System.String">
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                            <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="strategie" HeaderText="Stratégie" UniqueName="strategie" FilterControlWidth="70%" DataType="System.String">
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle"/>
                            <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="element_couvert" HeaderText="Code élément couvert" UniqueName="element_couvert" FilterControlWidth="70%" DataType="System.String">
                            <HeaderStyle HorizontalAlign="Center" />
                            <ItemStyle HorizontalAlign="Left" VerticalAlign="Middle" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="date_echeance" DataFormatString="{0:d}" HeaderText="Date échéance" FilterControlWidth="70%"
                            UniqueName="date_echeance" DataType="System.DateTime">
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                            <ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="nomi_designe" DataFormatString="{0:N0}" HeaderText="Nominal utilisé ($)" FilterControlWidth="70%"
                            UniqueName="nomi_designe" Datatype="System.Int64">
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                            <ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="nbre_designe" DataFormatString="{0:N0}" HeaderText="Nombre de désignations" FilterControlWidth="70%"
                            UniqueName="nbre_designe" Datatype="System.Int64">
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                            <ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="nomi_disponible" DataFormatString="{0:N0}" HeaderText="Nominal utilisable ($)" FilterControlWidth="70%"
                            UniqueName="nomi_disponible" Datatype="System.Int64">
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                            <ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="taux_utilis_act" HeaderText="Taux utilis. actuel (%)" FilterControlWidth="70%"
                            UniqueName="taux_utilis_act" DataFormatString="{0:N2}" DataType="System.Double">
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                            <ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="nomi_total_cour" DataFormatString="{0:N0}" HeaderText="Nominal courant ($)" FilterControlWidth="70%"
                            UniqueName="nomi_total_cour" Datatype="System.Int64">
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                            <ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="nomi_total_prec" DataFormatString="{0:N0}" HeaderText="Nominal précédent ($)" FilterControlWidth="70%"
                            UniqueName="nomi_total_prec" Datatype="System.Int64">
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                            <ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="ecart_absolu" DataFormatString="{0:N0}" HeaderText="Écart absolu ($)" FilterControlWidth="70%"
                            UniqueName="ecart_absolu" Datatype="System.Int64">
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                            <ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" />
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="ecart_pct" HeaderText="Écart (%)" UniqueName="ecart_pct" FilterControlWidth="70%"
                        DataFormatString="{0:N2}" DataType="System.Double">
                            <HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />
                            <ItemStyle HorizontalAlign="Right" VerticalAlign="Middle" />
                        </telerik:GridBoundColumn>
                        <telerik:GridButtonColumn Text="Détail" UniqueName="D" ItemStyle-HorizontalAlign="Center"
                            ButtonType="LinkButton" CommandName="CustomDetail"  />
                    </Columns>
                    <PagerStyle AlwaysVisible="True" Mode="Slider" />
                </MasterTableView>
                <ClientSettings Scrolling-UseStaticHeaders="false">
                    <Scrolling AllowScroll="True" UseStaticHeaders="true" ScrollHeight="" />
                    <Resizing AllowResizeToFit="true" AllowColumnResize="true" EnableRealTimeResize="true" />
                </ClientSettings>
                <FilterMenu EnableImageSprites="False">
                </FilterMenu>
            </telerik:RadGrid>
        </telerik:RadPageView>
    </telerik:RadMultiPage>

Here is my problem: when I have no dynamic tab created, and I do an action on the grid in my static tab (be it using a filter, or changing the page in the pager), the first time I try to create a tab it automatically closes itself. However, if i try to create it again, it will work. Also, if i already have a dynamic tab created, this behavior seems to not happen and things are functionning properly.

Also, I have tried to not force a click in my javascript, and click it manually instead. The same thing happens, the tab is created, and when I click on it (and it tries to create the pageview and load the user control), it will close itself. So I can be sure that this bahavior seems to happen when the click action is made upon the tab.

Again, I want to say that this code is working as expected in most cases, except for this very specific case (when using filter or changing page in pager, and no dynamic tab was already created)

Thanks

 

[Daniel]

After further testing, this bug happens when we close a dynamic tab (it execute the deletetabs javascript function) and then use the filter or pager. I am still unsure as to why this behavior would happen though. 

Would really appreciate if someone from telerik could clarify this for me.

Thanks

[Dimitar Terziev]

Hello Daniel,

I've inspected the provided implementation and it seems a valid one. I've also made a sample page based on the scenario mentioned in your post trying to reproduced the experienced problem, but to no avail. Please test whether the same problem is observed on the attached sample.

Greetings,
Dimitar Terziev
the Telerik team