This is a migrated thread and some comments may be shown as answers.

Dynamically generated tab closes on click

2 Answers 41 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 09 May 2012, 04:40 PM
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 Answers, 1 is accepted

Sort by
0
Daniel
Top achievements
Rank 1
answered on 11 May 2012, 03:59 PM
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
0
Dimitar Terziev
Telerik team
answered on 14 May 2012, 10:12 AM
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.
Tags
TabStrip
Asked by
Daniel
Top achievements
Rank 1
Answers by
Daniel
Top achievements
Rank 1
Dimitar Terziev
Telerik team
Share this question
or