Dynamically generated tab closes on click

3 posts, 0 answers
  1. Daniel
    Daniel avatar
    4 posts
    Member since:
    May 2012

    Posted 09 May 2012 Link to this post

    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

     
  2. Daniel
    Daniel avatar
    4 posts
    Member since:
    May 2012

    Posted 11 May 2012 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 14 May 2012 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Back to Top